5

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?

Community
  • 1
  • 1
Senseful
  • 86,719
  • 67
  • 308
  • 465
  • Have you seen [this answer](http://stackoverflow.com/a/15506642/608157)? Is that what you are looking for? – David Rönnqvist May 03 '13 at 05:58
  • @DavidRönnqvist I assume the concept is clear to OP. He's looking for the specific values Apple uses by default. –  May 03 '13 at 18:08
  • 1
    @H2CO3 Oh, in that case... assuming they are the same as the timing functions: "`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." @Senseful Is that the answer you are looking for? – David Rönnqvist May 03 '13 at 18:51
  • @DavidRönnqvist I think you should post that as an answer. –  May 03 '13 at 19:14

2 Answers2

3

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)

Community
  • 1
  • 1
David Rönnqvist
  • 56,267
  • 18
  • 167
  • 205
  • Thanks for the answer. Is there a way to call the kCAMediaTimingFunctionDefault function directly? Or what would be the best way to mimic the same behavior? Would you just use the math equation from your [other answer](http://stackoverflow.com/a/15506642) with the constants from above? – Senseful May 03 '13 at 22:32
  • @Senseful You can't call timing functions directly. Depending on what you want to do with the timing function/interpolation you could do the math yourself (like the other answer I linked to) but since you mention a custom animation I would very much recommend that you watch the [Animation Custom Layer Properties presentation by Rob Napier](http://cocoaheads.tv/animating-custom-layer-properties-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) – David Rönnqvist May 04 '13 at 10:27
  • Apple's documentation appears to be incorrect here. neoneye's answer is correct. – Sophie Alpert Jun 08 '14 at 09:54
1

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)
neoneye
  • 50,398
  • 25
  • 166
  • 151