Introducing ease in the update cycle

Question

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

I know two points, and I know the launch speed of an object. Animation time is not so important for me. I can decide if necessary.

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

I read about facilitating functions, but I did not understand how I really implement it in the update cycle. here is my update cycle code with a place that should somehow implement the 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

Sync Functions as Bezier Curves

The time deceleration function is basically a Bezier curve from (0,0) to (1,1) , where the horizontal axis is “time” and the vertical axis is “number of changes”. Since the Bezier curve is mathematically equal

 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 sum of the changes that should be applied. Please note that both the time and the change are normalized (in the range from 0 to 1).

Note that t is not a time value, t is how far along the curve you came. The time value is the x value of the point along the curve.

---

The curve below is a sample of a lightness curve that starts slowly, goes faster and slows down at the end.

If, for example, the third part has passed, you have calculated how many changes correspond to updating the value of the animated property as

 currentValue = beginValue + amountOfChange*(endValue-beginValue) 

Example

Say that you are animating a 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 (control points try to be close to the control points image above).

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

 (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 introduce that t in

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

we get the “magnitude of change” when 1 second of duration has passed.

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

So finally: 1 second in the animation position

 (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 understand how to use the synchronization features.