Jump to content
Search Community

Best Strategy for Looping Animation with tweened timescale?

CaptShmo test
Moderator Tag

Recommended Posts

Hey all, I have a question about the best tactic to use in the following situation, maybe somebody can help.

 

Imagine a playing card that is flipping over from left to right rapidly, it's scaleX going from 1 to 0 and back to 1 again, then repeating. I want to have the card flip rapidly and first, and then slow down its flip until it rests face up and stops. However, I want to show the back of the card on every other flip of course, so this creates some problems. I also need to tween the currentProgress (or maybe the timescale) of the timeline to get the rotation to slow down and speed up as necessary. What is the best strategy for this? I was thinking of using the TweenEvent.REPEAT event to monitor when to show the back or front of the card, which works, but I thought I would ask if anybody does this sort of thing often and has developed a good strategy for this type of thing. In my current code, I am relying on spot judging how many seconds I have to pass to the TweenLite which controls the timeScale in order to get a good result, and the "repeat" value of the timeline is technically never reached and won't fire a complete event. (repeat could be 16 or 17 when the timeScale hits 0, tween is not technically complete). Anyways, sorry if this is a bit garbled, a bit hard for me to put my situation into words at the moment, but maybe the code can help:

 

_animTimeline = new TimelineMax();
_animTimeline.repeat = 20;
_animTimeline.addEventListener(Event.COMPLETE, onReceiveItemAnimComplete, false, 0, true);
_animTimeline.addEventListener(TweenEvent.REPEAT, onReceiveItemAnimRepeat, false, 0, true);
_animTimeline.insert(new TweenMax(_inventoryClip, .1, {transformAroundCenter:{scaleX:1}, startAt:{transformAroundCenter:{scaleX:0}}}), 0);
_animTimeline.insert(new TweenMax(_inventoryClip, .1, {transformAroundCenter:{scaleX:0}, startAt:{transformAroundCenter:{scaleX:1}}}), .1);
TweenLite.to(_animTimeline, 5, {timeScale:0});

 

Thanks to all who help,

 

--CaptShmo

Link to comment
Share on other sites

I may not have fully understood the goal you described, but instead of tweening the timeScale, why not simply pause() the timeline, then tween the currentTime value from 0 to the duration (to play the whole thing) and use an ease to slow down towards the end. That way you can set it to last exactly a certain amount of time and you can control how quickly it slows down at the end using the ease. For a mild effect, use Quad.easeOut. For a stronger effect, use Strong.easeOut.

 

Does that help?

Link to comment
Share on other sites

Thanks Jack, I think I just have to play around with it a bit more, I'm sure there's a few ways to do this, my original approach actually used currentTime but in the process of messing around with it I tried timeScale as well. I will post the results of my experiments when I'm done if I get it sorted out properly, though the designer for the project might want to end up doing this in an After Effects movie to give it a bit more nuance, I will notify the thread if I need more help or if I find a good approach for doing this.

 

Thanks! (btw, renewed my membership today, thanks again for the great work)

 

--CaptShmo

Link to comment
Share on other sites

Hey all, I ended up using this:

 

var speed:Number = 1;
_animTimeline = new TimelineMax();
_animTimeline.repeat = 6;
_animTimeline.addEventListener(Event.COMPLETE, onReceiveItemAnimComplete, false, 0, true);
_animTimeline.insert(new TweenMax(_inventoryClip, speed, {transformAroundCenter:{scaleX:0}, startAt:{transformAroundCenter:{scaleX:1}}}), 0);
_animTimeline.insert(new TweenMax(_inventoryClip, speed, {transformAroundCenter:{scaleX:1}, onStart:onReceiveItemAnimRepeat}), speed);
TweenLite.to(_animTimeline, 2, {totalProgress:1});

 

turns out the totalProgress property of the TimelineMax class was what I needed; it counts the number of repeats in a timeline as part of the progress, allowing me to maintain COMPLETE event for the timeline.

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...