views:

774

answers:

2

Is it possible to change smoothly transition between one bezier based animation and another using TweenMax ?

Before the first is complete I would like to create a new curve for the object to follow.

t = new TweenMax(movieClip, speed, 
{bezierThrough:[{x:84, y:207}, {x:300, y:345}],
orientToBezier:false, ease:Sine.easeOut, onComplete:walkComplete } );

There is a method called setDestination which can adjust the destination parameters on the fly but it seems to result only in a linear animation.

http://www.greensock.com/as/docs/tween/com/greensock/TweenMax.html#setDestination()

+1  A: 

you can call a function every time the tween updates the object being tweened by passing in an update function to call like so:

t = new TweenMax(movieClip, speed, 
{bezierThrough:[{x:84, y:207}, {x:300, y:345}],
orientToBezier:false, ease:Sine.easeOut, onComplete:walkComplete, onUpdate:walkInProgress } );

The update function than can check the x and y cords of the object and toward the end create the new curve. Your onComplete function can animate on the new curve.

Simon
A: 

Using setDestination can result in smooth transitions by setting the x and y properties. I increased the duration of nearly ending tweens to prevent rapid jumping to the new destination.

if ( t.progress > .8)
 t.duration += 1;
 t.setDestination("x", points[1].x);
 t.setDestination("y", points[1].y);
Chris Porter