UIKit Animation

Get started animating your views in iOS! Learn to control changes in their visible properties over time, along with transitions between the views themselves. By Jessy Catterwaul.

Leave a rating/review
Download materials
Save for later
Comments
Share

Learning path

This is part of the iOS User Interfaces with UIKit learning path. View path.

Who is this for?

Developers who know the basics of Swift and Xcode, but are beginners to animation in UIKit.

This course is part of our iOS User Interfaces with UIKit learning path. Knowledge from earlier in the path is prerequisite.

Covered concepts

  • Animating Auto Layout Constraints
  • Springs
  • View and Views Controller Transitions
  • Transforms
  • Keyframes

Part 1: Animation with Auto Layout

01
Toggle description

In this part, you'll learn how to animate Auto Layout constraints in iOS. Find out what animation is and how it can help your apps in this introductory video!

02
Toggle description

Animate the constant property of an Auto Layout constraint as you create your first view animation for the Packing List app.

Try animating another constraint on your own, and get a sneak peek at animating view properties directly.

Toggle description

Learn how to animate the constraints of views you create dynamically and constrain entirely in code.

Toggle description

Challenge time! Make use of UIView.animate(withDuration:)'s delay argument, adding a new animation to move an item preview offscreen after a short delay.

Toggle description

Learn the differences between animating constants and multipliers, then try animating a multiplier using a search and replace approach.

Toggle description

Try your hand at another way to animate constraint multipliers: toggling between two constraints with IBOutlets.

Toggle description

It's time to add a little fun to your animations! Learn how to make spring-driven animations and customize their effects.

Toggle description

Learn to use view transitions: a set of predefined view animations that can help you quickly add and remove views with style.

Toggle description

In this challenge, have another try at using view transitions and explore the different ways to trigger them.

Conclusion 0:31
Toggle description

In this video you'll review what you've learned in this section, and find out what's next in your animation journey.

Part 2: Animating UIView Properties

Toggle description

In this part, you'll start animating views directly. What's the difference between animating constraints and animating view properties?

Toggle description

Build an animation to cross-fade between two views using three different view properties and some new techniques.

Toggle description

Try adding another animation using a view property. This time, use alpha to fade a single view in and out.

Toggle description

Learn how to scale, translate, and rotate views with the powerful, but sometimes confounding, transform property.

Toggle description

In this challenge, add variation to your last animation to slide labels to and from different directions.

Toggle description

Experiment with combining changes in multiple transform properties to create complex animations, and find out how they can go wrong.

Toggle description

Create a complex animation that encompasses multiple properties, and multiple steps, with a keyframe animation.

Toggle description

In this challenge, solidify your keyframe animation skills by adding one more keyframe animation to your project.

Conclusion 0:28
Toggle description

Review what you've learned in this section, and prepare to take your animation skills to the next level.

Part 3: Animating View Controller Transitions

Toggle description

Learn about view controller transitions and why you should consider customizing them with unique animations in your apps.

Toggle description

Take a tour of the Beginning Cook app and set it all up for custom view controller transition animations.

Now that you have several view animations under your belt, try to plan out the steps needed to build the presentation animation.

Toggle description

Follow through on your plan from the previous challenge by implementing all of the steps to create a custom presentation animation.

Toggle description

In this challenge, plan the steps required to take the presentation animation you've completed, and run it in reverse as a dismiss animation.

Toggle description

Take your plan for the dismiss animation and put it into action to create a completely customized view controller transition animation.

Add Polish 5:42
Toggle description

Wrap up your custom view controller transition with a few final steps to make the animation really shine.

Conclusion 1:22
Toggle description

Review what you've learned in this section and the course, and find out what more there is to learn about animating in iOS.

Up next

iOS & Swift
Integrating UIKit & SwiftUI
Learn how to integrate SwiftUI views into your UIKit apps and view hierarchies, and how to host UIKit view... more

Instructors

Contributors

Christine Sweigart

Editor

Adriana Kutenko

Illustrator

Over 300 content creators. Join our team.