StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You may be able to use the <a href="http://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/Animation_Types_Timing/Articles/Timing.html" rel="noreferrer">hierarchical nature of timelines</a> in layer trees to achieve what you’re looking for. Objects implementing <a href="http://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CAMediaTiming_protocol/Introduction/Introduction.html" rel="noreferrer"><code>CAMediaTiming</code></a>, which include both <code>CAAnimation</code> and <code>CALayer</code>, inherit a timespace from their parent, which they can modify (via scaling, shifting and repeating) and propagate to their children. By setting the <code>speed</code> property of a layer to 0.0 and adjusting the <code>timeOffset</code> property manually, you can decouple that layer (and all of its sublayers) from the usual notion of time.</p> <p>What you’d do in your case is define the animations for all your menu items to animate their position along your desired <code>CGPath</code> from time <i>t</i><sub>0</sub> to <i>t</i><sub>1</sub>, with the appropriate <code>timeOffset</code> on each animation to keep your items appropriately spaced. Note that a <code>beginTime</code> of 0.0 on an animation is usually interpreted as starting from the time the animation was added to its layer, so if you want <i>t</i><sub>0</sub> to be 0.0, you'll probably have to set it to a tiny epsilon > 0.0.</p> <pre><code>CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; animation.beginTime = 1e-100; animation.duration = 1.0; animation.fillMode = kCAFillModeBoth; animation.removedOnCompletion = NO; animation.path = path; animation.calculationMode = kCAAnimationPaced; animation.timeOffset = timeOffset; </code></pre> <p>You’d then set the <code>speed</code> property to 0.0 on a parent layer (containing only these menu items) and update its <code>timeOffset</code> to values between <i>t</i><sub>0</sub> and <i>t</i><sub>1</sub> in response to your touch events.</p> <p>This approach has two potential caveats. Because you’ve taken over the nature of time on this layer subtree, you probably won’t be able to animate other properties at the same time. Additionally, if you want coasting behavior for a fast flick, you’ll probably need to animate time forward on your own.</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