Mac OSX-style Bouncing Dock Icon - Help Please

[ngfl]

Hi, am attempting to re-create the animation style of a bouncing icon on the mac osx dock as a visual cue. I've got the animation working but it's a bit clunky and I'm sure it can be achieved in a more elegant solution. Also, stopping the animation pauses it where it is rather than ending it by finishing the bounce cycle.

 

public function bounce():void
{
bounceUp();
}

private function bounceUp():void
{
bounceUpTween = TweenMax.to(this, 0.5, {y: "-50", onComplete: bounceDown } );
}

private function bounceDown():void
{
bounceDownTween = TweenMax.to(this, 1, {y: "+50", ease:Bounce.easeOut, onComplete: bounceUp } );
}

public function stopBouncing():void
{
bounceUpTween.pause();
bounceDownTween.pause();
}

 

Can anyone help me optimise this please? Also, I'd like the stopBouncing method to work as described. Any help much appreciated.

[joakimhoegset]

Hi you can try to use yoyo instead.

 

private function bounceUp():void

{

bounceUpTween = TweenMax.to(this, 0.5, {y: "-50", repeat:-1, yoyo:true} );

}

 

I assume this is a roll_over function so on the roll_out you can use

 

private function bounceDown():void

{

bounceUpTween = TweenMax.to(this, 0.5, {y: "original y position"} );

}

 

This gets it back to its original position from where it is at the moment.

 

Joakim

[ngfl]

Thanks for the suggestion. Unfortunately, the bounceUp and bounceDown are part of the same animation - it moves up without easing and down with bounce easing. Consequently, I can't see how I can use yoyo or repeat as I only want the bounce easing on the downward motion.

 

Cheers anyway.

[GreenSock]

How about something like this?:

 

var allowBounce:Boolean;

public function bounce():void {
   allowBounce = true;
   bounceUp();
}

private function bounceUp():void {
  if (allowBounce) {
      TweenMax.to(this, 0.5, {y:"-50", onComplete: bounceDown } );
   }
}

private function bounceDown():void {
  TweenMax.to(this, 1, {y:"50", ease:Bounce.easeOut, onComplete:bounceUp } );
}

public function stopBouncing():void {
  allowBounce = false;
}