9.10 · How UIView animation really works, springs, timing and display links

The animation APIs hide a few mechanisms (additive animations, spring parameters, layer time, display links) that explain most “why did it do that” moments.

Mental model. The model changes immediately; the animation is a decaying offset layered on top. Time is a property of the layer, and a display link is just a callback per frame.

What UIKit adds to the layer

The animation UIView.animate creates, and how it can be interrupted.

  1. What does UIView.animate add to the layer, why is the model value already final, and what do beginFromCurrentState and performWithoutAnimation do? 9.10.1 · L5
    A UIView property change outside an animation block has no action, so it jumps (the layer’s action(forKey:) returns nothing). Inside UIView.animate, UIKit…

Springs, curves and per-frame callbacks

Spring parameters, layer timing, CADisplayLink.

  1. How do spring parameters work: mass, stiffness, damping, duration and bounce, and why must a CASpringAnimation get its duration set? 9.10.2 · L3
    A CASpringAnimation simulates a damped spring with mass, stiffness, damping and initialVelocity (defaults 1, 100, 10, 0). Those physical numbers are awkward to…
  2. What are the standard timing curves, and how do speed, timeOffset and beginTime change a layer’s local time (the pause trick)? 9.10.3 · L5
    Easing is a cubic Bézier through (0,0), two control points and (1,1). The named CAMediaTimingFunctions read back as: linear (0,0)–(1,1); easeIn (0.42, 0) and…
  3. How do you drive an animation per frame with CADisplayLink, and why does it leak its target? 9.10.4 · L3
    A CADisplayLink calls a method once per display refresh, so you can compute state from the elapsed time (timestamp and targetTimestamp) and update the UI for…

More in Layout, rendering & animation