Jump to content
Search Community

Looping a tween

Miroku_87 test
Moderator Tag

Recommended Posts

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.

  • Like 1
Link to comment
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

Link to comment
Share on other sites

  • 6 years later...
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
Link to comment
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

Link to comment
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.
×
×
  • Create New...