Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mimic Apple's UIViewAnimationOptionCurveEaseInOut math equation?

I want to create an animation that will appear to animate just like Apple's CurveEaseInOut, so that my application looks consistent. The problem is that this particular animation cannot use the UIView animate method. I must manipulate the position manually at every frame. For example, I get a time T and I need to output the center C for the point at that time. Rather than using a linear relationship (e.g. C = T), I want it to ease in and out just like Apple does.

Which curve equation is Apple using for that animation option?

I assume the curve looks similar to this: (which was taken from this question)

enter image description here

If that is the case, it looks like I should be able to just tweak the Cubic Hermite spline equation with the correct constants and get the same result. The question is which constants does Apple use?

like image 653
Senseful Avatar asked Oct 05 '22 05:10

Senseful


2 Answers

As Carbonic Acid (H2CO3) pointed out, the question is what control points Apple use.

Assuming that it's the same as the default timing function in Core Animation you could get the control points from the documentation:

kCAMediaTimingFunctionDefault Specifies the timing function used as the default by most animations. It approximates a Bézier timing function using the control points [(0.0,0.0), (0.25,0.1), (0.25,0.1), (1.0,1.0)]. By using this constant you ensure that your animations will use the current default timing.


Edit

Since you mention a custom animation I would very much recommend that you watch the Animation Custom Layer Properties presentation by Rob Napier. You get to benefit from Core Animation while still doing your custom animation. (Watch the entire presentation. It helps with understanding much of Core Animation)

like image 122
David Rönnqvist Avatar answered Oct 18 '22 13:10

David Rönnqvist


Simon Whitaker has an online javascript configurator for CAMediaTimingFunction.

His code dumps these control points:

linear        (0.00, 0.00), (0.00, 0.00), (1.00, 1.00), (1.00, 1.00)
easeIn        (0.00, 0.00), (0.42, 0.00), (1.00, 1.00), (1.00, 1.00)
easeOut       (0.00, 0.00), (0.00, 0.00), (0.58, 1.00), (1.00, 1.00)
easeInEaseOut (0.00, 0.00), (0.42, 0.00), (0.58, 1.00), (1.00, 1.00)
default       (0.00, 0.00), (0.25, 0.10), (0.25, 1.00), (1.00, 1.00)
like image 27
neoneye Avatar answered Oct 18 '22 12:10

neoneye