Interactive Animations with `UIViewPropertyAnimator`

Why Do We Need a New Animation API?

Before diving into the code, let's establish why interactive animations are so valuable and what makes UIViewPropertyAnimator the right tool for the job.

As the article points out, direct manipulation makes an app feel more responsive and intuitive. UIViewPropertyAnimator, introduced in iOS 10, was created specifically to facilitate these kinds of animations. It addresses the shortcomings of older APIs:

• UIView.animate: Simple and easy to use, but you have no control once the animation starts.
• CAAnimation: Powerful and performant, but not designed for interactivity. Pausing, scrubbing, or reversing is complex to implement correctly.

UIViewPropertyAnimator combines the best of both worlds. It gives you an animator object that represents the animation. You can hold onto this object, inspect its state, and manipulate it long after it has started.

The Core Benefits: Interactivity, Interruptibility, and More

UIViewPropertyAnimator is built on a state machine, which allows it to be paused, resumed, and stopped in a predictable way.

This stateful nature provides several key benefits that directly enable advanced interactive animations:

• Interactive: You can "scrub" through an animation by setting its fractionComplete property, which is perfect for linking an animation's progress to a user gesture.
• Interruptible: An animation can be paused at any time. You can then change its parameters or even add new animations before resuming.
• Reversible: You can change the direction of an animation mid-flight by setting its isReversed property.
• Timing Control: You can modify the animation's timing curves and duration dynamically.

Let's explore the technical underpinnings that make this possible.

The crucial takeaway is that UIViewPropertyAnimator doesn't reinvent the wheel; it puts a powerful new steering wheel on the high-performance engine of Core Animation that you're already familiar with.

The Key to Interactivity: fractionComplete

The single most important property for creating interactive animations is fractionComplete. It's a CGFloat value between 0.0 and 1.0 that represents the current progress of the animation. By manually setting this property, you can drive the animation from an external source, like a slider or a pan gesture.

Let's see this in action. The following video demonstrates how to control an animation's progress using a simple UISlider.

As you saw, the core logic is just one line: animator.fractionComplete = sender.value. This simple but powerful connection is the foundation of all interactive animations built with UIViewPropertyAnimator.

From Sliders to Gestures: Making it Truly Interactive

While a slider is a great way to understand the concept, real-world interactive animations are typically driven by gestures. The pattern for using a UIPanGestureRecognizer is a cornerstone of working with UIViewPropertyAnimator.

The "Building Better iOS App Animations" article you read earlier contains a perfect code snippet for this. Let's analyze it.

The logic breaks down elegantly based on the gesture's state:

1. .began: The user touches down and starts panning.

   • Create the UIViewPropertyAnimator instance with the final state of the animation (e.g., the view's final position and alpha).
   • Crucially, you immediately call animator.pauseAnimation(). The animation is now in the active state but paused at the very beginning (fractionComplete is 0.0).

2. .changed: The user drags their finger.

   • Calculate how far the user has dragged.
   • Convert that distance into a percentage (a value from 0.0 to 1.0).
   • Update animator.fractionComplete with this percentage. The UI will update instantly to match the animation's progress at that exact point.

3. .ended: The user lifts their finger.

   • Call animator.continueAnimation(withTimingParameters: nil, durationFactor: 0). This tells the animator to complete the animation from its current progress to the end, using its original timing curve.

This pattern demonstrates the benefit of interruptibility. At any point during a "tap" animation, the user can touch down, "catch" the view mid-flight, and take control of its progress.

Beyond Scrubbing: Reversibility

Another powerful benefit is the ability to reverse an animation. Imagine a user starts to drag a panel open but changes their mind and flings it closed. You can use the gesture's velocity at the .ended state to decide whether to continue the animation or reverse it.

The same article you've been reading, "Building Better iOS App Animations," covers this in its section titled "Step #5: Use the pan velocity to reverse animations." (resource LINK). By checking recognizer.velocity(in: view) and setting transitionAnimator.isReversed = true, you can dynamically change the animation's direction. This creates a much more fluid and intuitive user experience.

Conclusion

In this lesson, we explored the "why" and "how" behind UIViewPropertyAnimator. You now understand its fundamental advantages over older animation APIs for creating modern, interactive user experiences.

Key Takeaways:

• UIViewPropertyAnimator provides an object-oriented API for creating interactive, interruptible, and reversible animations.
• It works by giving you an animator object that controls a Core Animation layer, allowing you to manipulate its progress.
• The fractionComplete property is the key to interactivity, allowing you to drive an animation's progress from a user gesture or another external source.
• A common pattern for gesture-driven animation is to pause() on .began, update fractionComplete on .changed, and continueAnimation() on .ended.

Preview of the Next Lesson:

We've covered the concepts and benefits today. In our next lesson, we'll put this knowledge into practice. You will implement an interactive animation driven by a pan gesture recognizer using UIViewPropertyAnimator, building a functional component from the ground up.