Basic UIView Property Animations

The UIView.animate API

The simplest way to animate changes to a view is with the static method UIView.animate(withDuration:animations:). The concept is straightforward:

1. You tell UIKit how long the animation should take (the duration).
2. You provide a closure (the animations block) where you set the final state of the view's properties.

UIKit and Core Animation then handle all the work of interpolating the property values over the specified duration, generating the smooth animation you see on screen.

When you change a property like myView.frame or myView.alpha inside this block, you are implicitly telling Core Animation to create an animation for that property on the view's backing layer. This API conveniently updates the model layer to the final value for you, so you don't have to worry about the animation "snapping back" as we discussed in the last lesson.

Animatable Properties

You can't animate every property of a UIView, but a significant number of the most important visual properties are animatable. Changing these properties within an animation block will cause them to transition smoothly from their current value to the new value.

To understand which properties are animatable and why UIView animations are so convenient, let's start with a short reading.

As the article mentions, the key animatable properties are:

• frame: The view's size and position relative to its superview. Animating this can cause the view to move and resize.
• bounds: The view's internal coordinate system, primarily its size. Animating the size of the bounds will resize the view around its center point.
• center: The view's position relative to its superview's coordinate system. This is often preferred over animating the frame.origin for pure positional changes.
• alpha: The view's opacity, from 0.0 (fully transparent) to 1.0 (fully opaque). Perfect for fade-in and fade-out effects.
• backgroundColor: The background color of the view.
• transform: A CGAffineTransform that can be used to scale, rotate, and translate the view without directly changing its frame.

Let's see a simple example in action.

As you saw in the example, the code simply sets the button's final frame and center within the animation block.

// A view controller with a 'button' property
let newButtonWidth: CGFloat = 100

UIView.animate(withDuration: 0.5) {
    // Set the final state of the view's properties
    self.button.frame.size = CGSize(width: newButtonWidth, height: newButtonWidth)
    self.button.center = self.view.center
}

This block of code tells UIKit: "Over the next 0.5 seconds, please change the button's size to 100x100 and move it to the center of the screen."

Animating Transforms

While animating the frame is useful, the transform property is often more powerful and performant, especially for rotation and scaling. A transform modifies how a view is rendered without altering its underlying frame, which can be more efficient for the rendering engine.

The transform property takes a CGAffineTransform value. You can create transforms for:

• Scaling: CGAffineTransform(scaleX: CGFloat, y: CGFloat)
• Rotation: CGAffineTransform(rotationAngle: CGFloat) (angle is in radians)
• Translation: CGAffineTransform(translationX: CGFloat, y: CGFloat)

You can also combine transforms. To reset a view to its original state, you set its transform to .identity.

Here is an example of scaling a view to 1.2x its original size and rotating it by 45 degrees ($\pi /4$ radians).

UIView.animate(withDuration: 0.5) {
    let scale = CGAffineTransform(scaleX: 1.2, y: 1.2)
    let rotate = CGAffineTransform(rotationAngle: .pi / 4)
    
    // Concatenate the two transforms
    self.myView.transform = scale.concatenating(rotate)
}

Adding More Control: Delays, Easing, and Completion

Basic animations are great, but professional-quality UI requires more nuance. You might want an animation to start after a delay, or you might want it to ease in and out instead of moving at a constant speed. For this, we use a more detailed version of the animate method.

Let's look at an article that explains these options well.

The key parameters are:

• delay: The time in seconds to wait before the animation starts.
• options: An OptionSet that lets you configure the animation's timing curve and other behaviors. The most common options define the "easing" of the animation:
  • .curveEaseInOut: Starts slow, speeds up, then slows down at the end. (Default)
  • .curveEaseIn: Starts slow and accelerates.
  • .curveEaseOut: Starts fast and decelerates.
  • .curveLinear: Moves at a constant speed.
• completion: A closure that is executed after the animation finishes. This is very useful for chaining animations together.

Seeing the difference between easing curves is easier than reading about them.

Putting It All Together

Let's combine these concepts into a single example. Imagine you have a UIView called squareView. The following code will:

1. Wait for 0.5 seconds.
2. Over the next 1.5 seconds, simultaneously:
   • Move the view down by 200 points.
   • Rotate it 90 degrees.
   • Fade it to 50% opacity.
3. The animation will start slow and end slow (.curveEaseInOut).
4. After it finishes, a message is printed to the console.

// Initial state is set outside the animation block
squareView.alpha = 1.0
squareView.transform = .identity

// Animate to the final state
UIView.animate(withDuration: 1.5,
               delay: 0.5,
               options: [.curveEaseInOut],
               animations: {
    // Set the final properties here
    squareView.alpha = 0.5
    let translation = CGAffineTransform(translationX: 0, y: 200)
    let rotation = CGAffineTransform(rotationAngle: .pi / 2)
    squareView.transform = translation.concatenating(rotation)
}, completion: { finished in
    if finished {
        print("Animation complete!")
    }
})

This single, declarative block encapsulates a complex visual change, demonstrating the power and simplicity of the UIView.animate API.

Conclusion

In this lesson, we bridged the gap between the theory of Core Animation and the practice of creating UI animations. You now have the primary tool for bringing your views to life in a simple, declarative way.

Key Takeaways:

• UIView.animate(withDuration:animations:) is the fundamental API for creating basic view animations in UIKit.
• In the animations block, you define the final state of the view's properties, and UIKit handles the interpolation.
• Key animatable properties include frame, center, alpha, and transform, which is used for scaling, rotation, and translation.
• You can gain finer control over animations using delays, easing curves (options), and completion handlers to chain sequences.

Preview of the Next Lesson:

While linear and ease-in/out curves are useful, many modern interfaces use animations that feel more physical and natural. In our next lesson, we will learn how to create spring animations using UIView.animate(usingSpringWithDamping:), which allows you to create bouncy, delightful effects that mimic the physics of a real-world spring.