StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to create custom easing function with Core Animation?
text
Body
copied!<p>I am animating a <code>CALayer</code> along a <code>CGPath</code> (QuadCurve) quite nicely in iOS. But I'd like to use a more interesting easing function than the few <a href="http://developer.apple.com/library/mac/#documentation/Cocoa/Reference/CAMediaTimingFunction_class/Introduction/Introduction.html#//apple_ref/doc/constant_group/Predefined_Timing_Functions" rel="noreferrer">provided</a> by Apple (EaseIn/EaseOut etc). For instance, a bounce or elastic function. </p> <p>These things are possible to do with MediaTimingFunction (bezier):</p> <p><img src="https://i.stack.imgur.com/cxJuW.png" alt="enter image description here"></p> <p>But I'd like to create <strong>timing functions</strong> that are more complex. Problem is that media timing seems to require a cubic bezier which is not powerful enough to create these effects:</p> <p><a href="http://wiki.sparrow-framework.org/_media/manual/transitions.png" rel="noreferrer">http://wiki.sparrow-framework.org/_media/manual/transitions.png</a></p> <p>The <a href="https://github.com/PrimaryFeather/Sparrow-Framework/blob/master/sparrow/src/Classes/SPTransitions.m#L86" rel="noreferrer">code</a> to create the above is simple enough in other frameworks, which makes this very frustrating. Note that the curves are mapping input time to output time (T-t curve) and not time-position curves. For instance, <em>easeOutBounce(T) = t</em> returns a new <em>t</em>. Then that <em>t</em> is used to plot the movement (or whatever property we should animate).</p> <p><em>So, I'd like to create a complex custom <code>CAMediaTimingFunction</code> but I have no clue how to do that, or if it's even possible? Are there any alternatives?</em></p> <p><strong>EDIT:</strong></p> <p>Here is a concrete example in to steps. Very educational :)</p> <ol> <li><p>I want to animate an object along a line from point <em>a</em> to <em>b</em>, but I want it to "bounce" its movement along the line using the easeOutBounce curve above. This means it will follow the exact line from <em>a</em> to <em>b</em>, but will accelerate and decelerate in a more complex way than what is possible using the current bezier-based CAMediaTimingFunction. </p></li> <li><p>Lets make that line any arbitrary curve movement specified with CGPath. It should still move along that curve, but it should accelerate and decelerate the same way as in the line example.</p></li> </ol> <p>In theory I think it should work like this:</p> <p>Lets describe the movement curve as a keyframe animation <em>move(t) = p</em>, where <em>t</em> is time [0..1], <em>p</em> is position calculated at time <em>t</em>. So <em>move(0)</em> returns the position at the start of curve, <em>move(0.5)</em> the exact middle and <em>move(1)</em> at end. Using a an timing function <em>time(T) = t</em> to provide the <em>t</em> values for <em>move</em> should give me what I want. For a bouncing effect, the timing function should return the same <em>t</em> values for <em>time(0.8)</em> and <em>time(0.8)</em> (just an example). Just replace the timing function to get a different effect.</p> <p>(Yes, it's possible to do line-bouncing by creating and joining four line segments which goes back and forth, but that shouldn't be necessary. After all, it's just a simple linear function which maps <em>time</em> values to positions.)</p> <p>I hope I'm making sense here.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload