Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kestal

Easing with constant acceleration and upper bound on velocity (custom easing?)

Recommended Posts

Hi,

 

For the purpose of distilling this problem to its principal components, let's say I have 2 object that are side by side, say at y=100 pixels.  I want both of those to fall down the screen, but to different destination y locations.  I want them both to accelerate (easeIn), at the same speed, even though their distance to tween is different.  Also I want to cap their final velocity, so they never fall faster than pixels/sec.

 

Here is an illustration:

 

(initial position)

Sprite1                                                      Sprite2 

    (fromX = 0, fromY = 0)                                 (fromX = 100, fromY = 0)

    (toX     = 0, toY     =  200)                            (toX      = 100, toY     = 400)   

 

                    (falling  -->       Sprite 1 and Sprite 2 have the EXACT same Y location as falling, since they are using the same custom easing IN function to control their acceleration and final velocity)

                    (falling)

                          ..

                          ..

                          ..

 

 

 

Sprite1 has stopped here)

Sprite1 (x=0, y=200)                               Sprite2 (is at the exact same Y locations because they are following the

                                                                             same easing IN  function, regardless of total distance to travel

 

 

 

 

 

 

                                                                       (Sprite2 continues to fall until it reaches it target location of y=400)

                                                                      Sprite2 (x = 100, y = 400)

 

 

 

Thanks,

--Kestal

 

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the clear explanation. 

Eases represent the amount of change relative to the amount of time elapsed. 

Extending the duration of the tween and the amount of change on the y property of Sprite2 is going to make the animation much different than the tween on Sprite1... which I'm sure you know.

 

There is no way in the current API to tell a single tween with a single ease that it should only curve a certain way for a certain amount of time in seconds and then go Linear for the remaining time.

 

Our SlowMo ease gives you a lot of control by merging an EaseOut, Linear, and EaseIn ease together. It is explained in more detail here: http://www.snorkl.tv/2012/03/introducing-the-slowmo-ease-in-greensock-animation-platform-v12/ 

 

As powerful as that ease is, it is still controlled by ratios. You select what percentage of the ease should be Linear and it figures out how much of the ease should be EaseOut and EaseIn parts. In other words you can't say.. accelerate at a certain rate for 3 seconds and then go Linear for the remainder of the duration.

 

What you want to do is  possible with 2 tweens

 

  1. create a 1 second tween* with the EaseIn ease that you want
  2. track the velocity of the object being tweened and record the final value when the tween ends. Let's imagine that tween ends with a velocity of 100 pixels per second
  3. figure out how much further the object needs to go and create a Linear tween that that will have the proper duration to get to the target value at a velocity of  100 pixels per second. 
  4. set the delay on the second tween to 1 second, or place it in a TimelineLite/Max right after the first tween.

*the 1 second duration of the first tween is completely arbitrary

 

 

Also, since you are a member it might be worthwhile to look into our PhysicsPlugins that allow you to control a tween based on forces like gravity

http://greensock.com/physics2d-as

 

In the following example both objects have the same gravity applied so they accelerate at the same rate. The first object stops after 2 seconds. 

 

import com.greensock.TweenLite; 
import com.greensock.plugins.TweenPlugin; 
import com.greensock.plugins.Physics2DPlugin; 
TweenPlugin.activate([Physics2DPlugin]); 
TweenLite.to(mc, 2, {physics2D:{gravity:30}}); 
TweenLite.to(mc2, 4, {physics2D:{gravity:30}}); 

One drawback is that I don't believe these tweens will reach a terminal velocity (move at a linear rate). However, you could kill this tween when you detect a certain velocity and then create a Linear tween as mentioned above.

 

Hopefully some of this helps you reach a solution for your situation.

Share this post


Link to post
Share on other sites

Thanks Carl! 

 

I have been reading these posts for some time, and as always, you are a wealth of info.

 

Thanks for the tip about checking the velocity.  I am already using the Seek() method several places to dissect that a tween is doing, for subsequent tweens and processing.  I had not thought about using it here, to determine when to break a tween into two pieces (acceleration, then linear). This may work, and is a great idea!

 

Also, I ran into the same thing with the Physics plugin, the terminal velocity.  Would it be easy to just hack up the physics plugin to rate limit it?

 

Thanks again!

--Kestal

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×