2 Replies Latest reply on Oct 25, 2013 2:41 AM by AMULI

    Passing variables to animation function

    iqmactep Level 1

      Is it possible to create an animation using keyframing such as a rectangle size increasing, origin of stage changing and the transparency changing. But then this is replicated many times with different values, so rather than creating multiple animations along the timeline, pass in some variables when calling the function from the different onClick events so is dynamic depending on the values passed, such as different origin values, position etc.?

        • 1. Re: Passing variables to animation function
          AMULI Level 4

          Hi iqmactep,

           

          It looks like the keywords are symbol and instanciation.

           

          You nest your tweening in a symbol. For example, tweening the size of an ellipse for the growing of a petal :

          Capture d’écran 2013-10-25 à 10.25.14.png

           

          Then is just a matter of creating a number of instances on stage and giving each different property values (here the transform : rotate).

           

          Capture d’écran 2013-10-25 à 10.28.04.png

           

          Capture d’écran 2013-10-25 à 10.28.23.png

           

          Download the example file here : https://app.box.com/s/18p2qutqz7nbxqtftox1

           

          Gil

          • 2. Re: Passing variables to animation function
            AMULI Level 4

            Having instantiated at authoring time, the next step is to instantiate at runtime. The stage now reduces to the heart element.

             

            sym.$('heart').css( 'z-index', 20);

            angle = 0;

            for (numInstance = 0; numInstance < 15; ++numInstance)

            {

              var symPetal = sym.createChildSymbol( "petalGrowing", "Stage");

              var elemPetal = symPetal.getSymbolElement();

              angle += 24 +Math.random(4);

              elemPetal

                .offset({ top: 200, left: 275 })

                .css(

                {

                  '-moz-transform':     'rotate('+angle+'deg)',

                  '-webkit-transform': 'rotate('+angle+'deg)',

                  '-o-transform':         'rotate('+angle+'deg)',

                  '-ms-transform':      'rotate('+angle+'deg)',

                  'transform':              'rotate('+angle+'deg)',

                  '-moz-transform-origin':     '50% 0%',

                  '-webkit-transform-origin': '50% 0%',

                  '-o-transform-origin':          '50% 0%',

                  '-ms-transform-origin':       '50% 0%',

                  'transform-origin':               '50% 0%',

                });

            }

             

            The ZIP pointed to by the above link has been updated to include this second version.

             

            Gil

            1 person found this helpful