- 687474703a2f2f692e67697068792e636f6d2f323646786f6c4c7a334152316f7a3631792e676966 - #233: Gesture-Driven Animations with Interpolate 🚶🏼🏃🏼 – Little Bites of Cocoa – Tips and techniques for iOS and Mac development

Animation plays a role in how we understand the user interfaces in the software we use. This role expands itself when are driven directly from a user’s gestures or interactions with the interface. Today we’ll look at a new framework that can help us create these types of experiences without breaking a sweat. Let’s dive in.

It’s called Interpolate and it’s by Roy Marmelstein.

As the project’s README puts it: “all animation is the interpolation of values over .”

Interpolate helps us describe the relationships that we want to exist between a user’s gesture and the interpolated values that should result for the properties of our views. Let’s try it by animating a color.

let colorChange = (
  from: UIColor.whiteColor(),
  to: UIColor.redColor(),
  apply: { [weak self] (result) in
    if let color = result as? UIColor {
      self?.view.backgroundColor = color

The Interpolate type holds some configuration, next we’ll want to wire it up to a gesture:

func handlePan(recognizer: UIPanGestureRecognizer) {
  let translation = recognizer.translationInView(self.view)
  let translatedCenterY = + translation.y
  let progress = translatedCenterY / self.view.bounds.size.height

  colorChange.progress = progress

Since Pan GRs every step of their progress as a simple float (from 0.0 – 1.0), we can simply set that progress percentage value directly on the Interpolate object.

There’s tons more too, Interpolate supports easing functions, and works on all sorts of foundation types (points, rects, colors, etc.).

More info about Interpolate can be found at

Source link


Please enter your comment!
Please enter your name here