Slot machine effect

[andrea.reginato]

Hi all, I'm facing with a problem trying to simulate a slot machine animation.

I basically want this animation made up from 3 animations that interchange

* Start moving the letters untill it reach a defined speed

* Mantain the speed for a certain amount of time

* slow down to a specific letter (which position is defined from the beginning)

 

I was thinking on building my own easy function but I wanted to know more from you.

At me this seems not so easy to solve.

 

Thanks to everybody.

[proffy]

Hi, i think you have 3 possibilities in this case. You have 3 steps in your animation, so split it up in 3 tweens:

 

- use the delay function :

------> first tween : no delay, let's take 1 second for the machine to go to his maximum speed, with a Strong.easeIn function

------> 2nd tween : delay of 1s so it begins when the first is finished, 2s of spinning, no easing function to let it spin witch no acceleration / desceleration

------> 3rd tween : delay of 3s corresponding to the time of the first + the time of the 2nd tween, 2s of tween-timing to make the machine stop with Strong or Expo.easeOut

 

- use the onComplete param instead of delay to achieve the following of the different tweens

 

- use the timelinelite plugin : i didn't use it so much but you surely can adapt the code above for timelineLite

[GreenSock]

One other option: You could just do one linear tween for the whole amount, pause it, and then use other tweens to control its currentTime property, like:

 

var myTween:TweenLite = new TweenLite(mc, 10, {y:1000, paused:true, ease:Linear.easeNone});

TweenLite.to(myTween, 1, {currentTime:1, ease:Quad.easeIn});

TweenLite.to(myTween, 8, {delay:1, currentTime:9, ease:Linear.easeNone, overwrite:false});

TweenLite.to(myTween, 1, {delay:9, currentTime:10, ease:Quad.easeOut, overwrite:false});

 

You'll get the smoothest effect, though, by just using a CustomEase because you can make it animate however you want - see http://blog.greensock.com/customease/