Chris Porter
Chris Porter

Reputation: 2449

TweenMax change in-progress bezier

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()

Upvotes: 0

Views: 3304

Answers (3)

Chris Porter
Chris Porter

Reputation: 2449

The newer updateTo method does precisely what I needed:

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

Upvotes: 2

Chris Porter
Chris Porter

Reputation: 2449

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);

Upvotes: 0

Simon
Simon

Reputation: 31

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.

Upvotes: 1

Related Questions