23 Replies Latest reply on Mar 27, 2013 11:49 AM by jay_harlow

    Rotate element by dynamic amount

    richtelford

      Hi.

       

      I have an Edge animation with a dial which indicates a percentage value. I want the dial to animate from zero up to the correct percentage value. This percentage value will be calculated via PHP and supplied to the Edge animation.

       

      So what I'm asking is can you specify the rotation value for an element dynamically (via code).

       

      Thanks,

       

      Richard

       

      dial.jpg

        • 1. Re: Rotate element by dynamic amount
          TimJaramillo Level 4

          Hi richtelford, yes- you can dynamically rotate an object using css, like this:

           

          var your_angle = 50;

           

          sym.$("your_wheel").css('transform','rotate(' + your_angle + 'deg)');

          sym.$("your_wheel").css('-moz-transform','rotate(' + your_angle + 'deg)');

          sym.$("your_wheel").css('-webkit-transform','rotate(' + your_angle + 'deg)');

          sym.$("your_wheel").css('-o-transform','rotate(' + your_angle + 'deg)');

          • 2. Re: Rotate element by dynamic amount
            resdesign Adobe Community Professional & MVP

            Brilliant Tim!

            • 3. Re: Rotate element by dynamic amount
              richtelford Level 1

              So I would put this as a trigger action on the frame I want it to start? How would I specify the duration of the rotation? Say for example I want it to last for 2 seconds.

               

              Thanks,

               

              Richard

              • 4. Re: Rotate element by dynamic amount
                TimJaramillo Level 4

                Hey richtelford, the code I supplied just sets the rotation once.

                 

                In order to animate a rotation, 2 options come to mind:

                 

                1. use setInterval to repeatedly call a "rotate" function, (containing the code I gave you), increase the "your_angle" var at each function call.

                 

                2. use jQuery animate. This is a hacky trick that uses the "step" method in the jQuery "animate" method. "Step" is repeatedly called at each step of the animation. I'm animating an arbitrary property "bottom", which doesn't affect this object. Put the code below in the Stage/compositionReady event. Here's where I got this hack: http://jsfiddle.net/39pe6/

                 

                 

                sym.$( "your_symbol" ).animate({"bottom": "200px"},

                {

                          duration: 5000,

                   step: function( now, fx ){

                      sym.$("your_symbol").css ({"-moz-transform":"rotate("+now+"deg)",

                                  "-webkit-transform":"rotate("+now+"deg)",

                                  "-ms-transform":"rotate("+now+"deg)",

                                  "-o-transform":"rotate("+now+"deg)"});

                            }

                },'linear');

                • 5. Re: Rotate element by dynamic amount
                  richtelford Level 1

                  Ah I was kinda hoping there would be an Edge solution. I can do all that without using Edge. What would be the advantage of doing this in Edge?

                   

                  Thanks. I really appreciate the help here guys.

                   

                  Rich

                  • 6. Re: Rotate element by dynamic amount
                    TimJaramillo Level 4

                    Hey richtelford. Ya, Edge doesn't have a built-in dynamic rotation animation feature. In fact, it doesn't have dynamic animation features at all (Flash doesn't either though ...). Right now, Edge is focused on timeline-based animation. As you know, you can leverage javascript to extend Edge's capabilities.

                     

                    "What would be the advantage of doing this in Edge", you ask? For me, the biggest advantage of Edge, over doing everything through straight JS, is the WYSIWYG layout capabilities, and the ability to nest symbols to create complex animations and interactions. You can lay out your graphics right there on the stage in Edge, and really see what's going on. I use Edge kinda like how I use Flash- I lay out all my graphics on the stage, but I do most of the funcitonality through code.

                     

                    Not to detract from Edge, but TweenMax js (GSAP) is extremely cool too. You should be able to import that library, and tween dynamic rotations to your heart's content, while still getting the benefits of the Edge interface.

                    • 7. Re: Rotate element by dynamic amount
                      Jerry Witt Level 2

                      Just spitballin' here, but what if he were to make his gear animate over 360 frames. He could then pass the degree of rotation he wanted to go to finalRotation=r. And then use sym.stop(r);

                      • 8. Re: Rotate element by dynamic amount
                        richtelford Level 1

                        Hi guys,

                         

                        I already have my gears animating across the full dial so based on what you've both said can I just specify/set the final rotation degree with script/code? E.g. onLoad (or whatever the equivalent is) var angle = XXX; sym.finalRotation = angle;. Sorry I'm not familiar with the methods and syntax of Edge yet. Though it seems Javascript-based.

                         

                        TweenMax sounds great also. I'm not sure if I have time to implement it in my current project but I will experiment with it for future work.

                         

                        Thanks again,

                         

                        Rich

                        • 9. Re: Rotate element by dynamic amount
                          TimJaramillo Level 4

                          @Jerry, yea he could rotate on the timeline, and then use sym.stop(r), though he would still need a setInterval to actually animate to the appropriate angle. At that point, he might as well rotate through code.

                           

                          @richtelford: in my opinion, you should use the jQuery animate method, and the step hack, which I posted above. It's smooth, and easy. And, yes indeed, Edge runs on javascript, so most anything you can do in javascript you can do in Edge. So when you're looking for how to do stuff in Edge, just do a search on how to do it in javascript.

                          • 10. Re: Rotate element by dynamic amount
                            richtelford Level 1

                            You're right Tim. It's super easy to achieve simply using the jquery animate function. Thanks man.

                             

                            Rich

                            • 11. Re: Rotate element by dynamic amount
                              TimJaramillo Level 4

                              Right on, no problem Rich! If you want to mark my post with the jQuery animate solution as "correct", it will help other folks who are looking for the solution to the same question.

                               

                              Cheers!

                              • 12. Re: Rotate element by dynamic amount
                                jay_harlow Level 1

                                Hi Tim,

                                 

                                I'm trying to do something similar and have seen your posts on a number of rotation-related posts and have tried them all. Problem is, I can't get any of the .css('transform','rotate([foo]deg)'); patterns to work.

                                 

                                For example, this will animate the opacity of the symbol, but not the rotation (I'm using Safari):

                                sym.$('bar1').animate({

                                                    opacity:0.25,

                                                    '-webkit-transform': 'rotate(45deg)'

                                          }, 500, function() {

                                });

                                 

                                Trying to debug it, I simplified your non-animated example above, and not even that will work:

                                sym.$('bar1').css('-webkit-transform','rotate(45deg)');

                                 

                                I assume there's something really dumb I'm missing but I cannot figure out what it is. Any ideas? Thanks!

                                • 13. Re: Rotate element by dynamic amount
                                  TimJaramillo Level 4

                                  Hi Jay,

                                   

                                  The problem is, you cannot directly manipulate the rotation property with the jQuery "animate" method. So in my example, I used the "step" property to call the rotation at every "step" of the tween. I mentioned this here:

                                   

                                  This is a hacky trick that uses the "step" method in the jQuery "animate" method. "Step" is repeatedly called at each step of the animation. I'm animating an arbitrary property "bottom", which doesn't affect this object.

                                   

                                   

                                   

                                  In the second static example, you're missing several things. You put a comma where there should be a colon. You also need to put the items in an object, between curly braces, {}. Your second, static  example should be this:

                                   

                                  sym.$("bar1").css ({"-webkit-transform":"rotate(45deg)"});

                                   

                                  HOWEVER, I would highly recommend tossing the jQuery animate method, and instead looking into the GSAP animation library. This library will change your life. You will become a titan among men if you master the GSAP library, along with Edge Animate.

                                   

                                  Below is an example of rotating a div and changing it's alpha using GSAP. It's so simple- the library takes care of all the different browser prefixes, etc.

                                   

                                  Example:

                                  www.timjaramillo.com/code/edge/gsap_rotate

                                   

                                  Source:

                                  www.timjaramillo.com/code/edge/_source/gsap_rotate.zip

                                   

                                  GSAP info:

                                  http://www.greensock.com/get-started-js/

                                   

                                   

                                   

                                  Code on Stage.CompositionReady:

                                   

                                  // use yepnope to load the greensock libs

                                  yepnope(

                                  {

                                  nope:[

                                            'greensock/TweenMax.min.js',

                                            'greensock/easing/EasePack.min.js',

                                            'greensock/plugins/CSSPlugin.min.js',

                                            'greensock/plugins/ColorPropsPlugin.min.js'

                                  ],

                                  complete: init

                                  }

                                  );

                                   

                                  //when yepnope has loaded everything execute init();

                                  function init (){

                                       // assuming you have a symbol named "Rectangle" at Stage root

                                       var RectangleSymbol = sym.$("Rectangle");

                                       TweenMax.to(RectangleSymbol, 1, {rotation:45, opacity:0.7, ease:Bounce.easeOut});

                                  }

                                  • 14. Re: Rotate element by dynamic amount
                                    richtelford Level 1

                                    Just wanted to follow up on this.. here is what I ended up with:

                                     

                                    http://community.matchtech.com/confidence-index/question-2/?age=30-39&sector=Construction& region=London

                                     

                                    I have been looking into using Greensock stuff for a separate project. It looks amazing.

                                    • 15. Re: Rotate element by dynamic amount
                                      jay_harlow Level 1

                                      Thanks, Tim. I think I picked up that comma syntax from a JQuery example, though that one uses step too. Still can't get that static code to work even as you wrote it, but the step function works great.

                                       

                                      I will definitely check out GSAP. Thanks!

                                      • 16. Re: Rotate element by dynamic amount
                                        TimJaramillo Level 4

                                        Jay- can you post your file (if you want help with the static rotation)?

                                         

                                        Rich- the rotating gears look great!

                                        • 17. Re: Rotate element by dynamic amount
                                          jay_harlow Level 1

                                          Sure, I'd be curious what I'm doing wrong. It's a super basic test file, just one symbol and one line of code:

                                           

                                          https://www.dropbox.com/s/zbqvmzsg83z8n8o/test.an

                                          • 18. Re: Rotate element by dynamic amount
                                            TimJaramillo Level 4

                                            Hey jay, in order for me to open the file, I need all dependent js files, not just the .an.

                                             

                                            Zip up the whole folder that contains the .an, all the .js files, etc.

                                            • 20. Re: Rotate element by dynamic amount
                                              TimJaramillo Level 4

                                              Hey Jay, the zip is missing the test.html file. Can you add it and upload again?

                                              • 22. Re: Rotate element by dynamic amount
                                                TimJaramillo Level 4

                                                Hey Jay, it looks like the CSS rotation prop doesn't work directly on an Edge symbol- you need to target a simple div shape. In your case you would need to do this:

                                                 

                                                sym.getSymbol("bar1").$('Rectangle').css ({"-webkit-transform":"rotate(45deg)"});

                                                 

                                                Yet another reason to use GSAP!

                                                • 23. Re: Rotate element by dynamic amount
                                                  jay_harlow Level 1

                                                  At least I wasn't completely crazy. Thanks Tim!