Miroku_87

Looping a tween

  • 8 posts in this topic

8 posts in this topic

Hi everyone,

is possible to make an object rotate forever with tweenMax/Lite?

 

I would prefer it to using ENTER_FRAME

 

Thank you in advance =)

Share this post


Link to post
Share on other sites

Absolutely. That's what the "repeat" special property is for in TweenMax. To repeat infinitely, use -1. Otherwise use the number of times you want it to repeat. For example, to repeat twice, do:

 

TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:2});

 

Or to loop infinitely, do this:

 

TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:-1});

 

Also, you might want to reduce the number slightly to avoid the appearance of a small pause in the rotation due to the fact that the first and last rendering of the animation are on exactly the same spot. In other words, if you rotate from 0 to 360, the first frame will be 0, it will increase each frame after that and then the last frame will be 360 which is exactly the same thing as 0 so when it loops and renders the starting position on the very next frame, it doesn't move because 0 is 360 in terms of rotation. So depending on the duration of your tween (how much rotation is incremented each second/frame), you'd want to decrease the final rotation state. For example, if your tween lasts 1 second and rotates 360 degrees in a swf that runs at 30fps, it's moving 360 / 30 every frame (12 degrees) so you'd want your repeating tween to go to rotation:"348" to look perfectly smooth.

 

Also, you can repeat infinitely with TweenLite by using an onComplete like this:

 

function doTween():void {
   TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween});
}
doTween();

 

Since the onComplete calls the same function that spawned the tween to begin with, it just keeps going.

  • 1 person likes this

Share this post


Link to post
Share on other sites

yeah do this

 

import com.greensock.*;

import com.greensock.easing.*;

 

 

TweenMax.to(someMovieClip, 1, {rotation:360, repeat:-1, ease:Linear.easeNone});

 

now technically there is doubling of frames as the objects start value of 0 is visually the same as 360.

with a fast framerate this won't be noticeable.

 

you could try hacking the end value to something less than 360

 

TweenMax.to(someMovieClip, 1, {rotation:355, repeat:-1, ease:Linear.easeNone});

 

There may be someone lurking on these forums who knows of a dead accurate way to do this

 

Carl

Share this post


Link to post
Share on other sites
On 1/14/2011 at 11:52 PM, GreenSock said:

Absolutely. That's what the "repeat" special property is for in TweenMax. To repeat infinitely, use -1. Otherwise use the number of times you want it to repeat. For example, to repeat twice, do:

 

 


TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:2});
 

 

 

Or to loop infinitely, do this:

 

 


TweenMax.to(mc, 1, {rotation:"360", ease:Linear.easeNone, repeat:-1});
 

 

 

Also, you might want to reduce the number slightly to avoid the appearance of a small pause in the rotation due to the fact that the first and last rendering of the animation are on exactly the same spot. In other words, if you rotate from 0 to 360, the first frame will be 0, it will increase each frame after that and then the last frame will be 360 which is exactly the same thing as 0 so when it loops and renders the starting position on the very next frame, it doesn't move because 0 is 360 in terms of rotation. So depending on the duration of your tween (how much rotation is incremented each second/frame), you'd want to decrease the final rotation state. For example, if your tween lasts 1 second and rotates 360 degrees in a swf that runs at 30fps, it's moving 360 / 30 every frame (12 degrees) so you'd want your repeating tween to go to rotation:"348" to look perfectly smooth.

 

Also, you can repeat infinitely with TweenLite by using an onComplete like this:

 

 


function doTween():void {
   TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween});
}
doTween();
 

 

 

Since the onComplete calls the same function that spawned the tween to begin with, it just keeps going.

Sorry for bumping an old thread but I was searching for a way to indefinitely repeat a rotation animation using TweenLite. When I use the function stated above I get syntax error "Uncaught SyntaxError: Unexpected token :" I realize that maybe the plugin syntax has changed over the past 6 years. Is there another way in TweenLite to infinitely continue an animation? Due to size constraints I can't use TweenMax for this.

Thanks!

Edited by Ali Farooq
Addition of cruital information

Share this post


Link to post
Share on other sites

Hi Ali,

 

The code in this thread is AS3 for Flash. An "Uncaught SyntaxError: Unexpected token" error sounds like something you would see in the browsers javascript console. If you are using JavaScript you would have to omit the return type :void

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.