Points and Distance Easing with Animation Change

[decaz]

Hi All,

 

I have a pretty specific question in which I have an Object moving along a vector that will eventually end up at a destination point and stop moving. The object in question is an asset that has a 'fly' animation sequence, a 'landing' animation sequence and an 'idle' animation sequence.

 

The Object must move along a straight line coming from a random point on the stage at a fixed velocity. The object will begin to ease when it is exactly 30 frames away from the end point in which it will change into the landing sequence(which takes 30 frames). Once the landing sequence is complete the easing should be rounding down to 0 in which the object has completed its journey and now switches to the 'idle' sequence indefinitely.

 

I have provided a screenshot below demonstrating my issue. Any help will be much appreciated as the math and when to play the landing sequence is giving me the most problems. I am trying to have the process of flying -> landing -> idling be very smooth and natural.

 

The swf is running at 30 fps btw.

 

[GreenSock]

This sounds like a perfect job for ThrowPropsPlugin. The great thing about that plugin is it allows you to define an initial velocity for any property and also define an ending value (or a range) and it'll do all the math to figure out how to smoothly transition from that initial velocity and land wherever you want in exactly the duration of the tween. It can be x/y (positional) values or rotation or anything. If the initial velocity is really strong, it'll even allow it to overshoot the ending value and smoothly come back. 

 

Here's some sample code:

 

TweenLite.to(mc, 100, {x:200, y:100, useFrames:true, ease:Linear.easeNone});
var xVelocity:Number = (200 - mc.x) / 100;
var yVelocity:Number = (100 - mc.x) / 100;
TweenLite.to(mc, 30, {throwProps:{x:{velocity:xVelocity, max:200, min:200}, y:{velocity:yVelocity, max:100, min:100}}, ease:Strong.easeOut, useFrames:true, delay:70});

Of course you could use PhysicsPropsPlugin or Physics2DPlugin to just set a particular velocity instead:

 

TweenLite.to(mc, 100, {physicsProps:{x:{velocity:10}, y:{velocity:5}}, useFrames:true});
TweenLite.to(mc, 30, {delay:70, throwProps:{x:{velocity:10}, y:{velocity:5}}, useFrames:true});

Notice we're actually interrupting the first tween - I just assumed that'd be easier for you rather than having to calculate point 1 and point 2 in your drawing, but keep in mind that you absolutely could do that - you could have it animate to a certain spot and then smoothly transition to another point where it finally lands, even if that point isn't inline. It could be way off in a different direction. 

 

ThrowPropsPlugin is one of those tools that takes some effort to wrap your head around, but once you "get it", you'll see how powerful it can be and how many problems it can solve. 

 

We're actually working on some enhancements to ThrowPropsPlugin now, so if you're a "Shockingly Green" or "Business Green" member and you'd like to get a sneak peek, let me know. 

 

Oh, and yes, ThrowPropsPlugin is a membership benefit of Club GreenSock, so it's not in the standard download zips. 

[decaz]

This is great, i'll have to try it out. Do you know by any chance how to manually calculate point 1 and point 2 from the drawing?

 

Basically how to calculate when to start the landing animation so when it stops playing it is exactly at the destination.

[GreenSock]

What variables do you know ahead of time? Just the velocity and the angle and duration?

[decaz]

I know of:

1. Distance
2. Velocity
3. Angle
4. I am trying to properly figure out the Duration. Since We are using useFrames I need to calculate the duration in frames it takes to travel to the goal point at the current velocity. Could you shed any light on that as well?

[GreenSock]

Did you realize that ThrowPropsPlugin has a calculateDuration() method that does this sort of thing for you? 

var duration:Number = ThrowPropsPlugin.calculateDuration(start, end, velocity, ease);

If you don't want to use that, it really depends on how much easing you want, but here's a rough equation:

//with NO easing:
var duration:Number = distance / velocity; 

//so since you want easing, you should increase the duration, maybe proportionally:
duration *= 1.5; 

//and then plug the values into a throwProps tween. 

Does that help?

[decaz]

Yes I realize that method exists but I in turn need to take seconds and convert it to number of frames it will take to get from a start to end value. In order to use your code above which has hardcoded frame values.

[GreenSock]

Actually, as long as your velocity value is described in units per frame, you're fine. It'll return the duration in frames. Give it a shot and let me know if it works well for you.