implementing ease in update loop

Question

I want to animate a sprite from point y1 to point y2 with some sort of deceleration. when it reaches point y2, the speed of the object will be 0 so it will completely stop.

I Know the two points, and I know the object's starting speed. The animation time is not so important to me. I can decide on it if needed.

for example: y1 = 0, y2 = 400, v0 = 250 pixels per second (= starting speed)

I read about easing functions but I didn't understand how do I actually implement it in the update loop. here's my update loop code with the place that should somehow implement an easing function.

-(void)onTimerTick{
   double currentTime =  CFAbsoluteTimeGetCurrent() ;
   float timeDelta = self.lastUpdateTime - currentTime;
   self.lastUpdateTime = currentTime;

   float *pixelsToMove = ???? // here needs to be some formula using v0, timeDelta, y2, y1

   sprite.y +=  pixelsToMove;
}

Answer 1

Timing functions as Bézier curves

An easing timing function is basically a Bézier curve from (0,0) to (1,1) where the horizontal axis is "time" and the vertical axis is "amount of change". Since a Bézier curve mathematically is as

start*(1-t)^3 + c1*t(1-t)^2 + c2*t^2(1-t) + end*t^3 

you can insert any time value and get the amount of change that should be applied. Note that both time and change is normalized (in the range of 0 to 1).

Note that the variable t is not the time value, t is how far along the curve you have come. The time value is the x value of the point along the curve.

---

The curve below is a sample "ease" curve that starts off slow, goes faster and slows down in the end.

If for example a third of the time had passed you would calculate what amount of change that corresponds to be update the value of the animated property as

currentValue = beginValue + amountOfChange*(endValue-beginValue)

Example

Say you are animating the position from (50, 50) to (200, 150) using a curve with control points at (0.6, 0.0) and (0.5, 0.9) and a duration of 4 seconds (the control points are trying to be close to that of the image above).

When 1 second of the animation has passed (25% of total duration) the value along the curve is:

(0.25,y) = (0,0)*(1-t)^3 + (0.6,0)*t(1-t)^2 + (0.5,0.9)*t^2(1-t) + (1,1)*t^3

This means that we can calculate t as:

0.25 = 0.6*t(1-t)^2 + 0.5*t^2(1-t) + t^3

Wolfram Alpha tells me that t = 0.482359

If we the input that t in

y = 0.9*t^2*(1-t) + t^3

we will get the "amount of change" for when 1 second of the duration has passed.

Once again Wolfram Alpha tells me that y = 0.220626 which means that 22% of the value has changed after 25% of the time. This is because the curve starts out slow (you can see in the image that it is mostly flat in the beginning).

So finally: 1 second into the animation the position is

(x, y) = (50, 50) + 0.220626 * (200-50, 150-50)
(x, y) = (50, 50) + 0.220626 * (150, 100)
(x, y) = (50, 50) + (33.0939, 22.0626)
(x, y) = (50+33.0939, 50+22.0626)
(x, y) = (83.0939, 72.0626)

I hope this example helps you understanding how to use timing functions.