SwiftUI: Animation

So, you’ve easily created an animation, in SwiftUI. But what is that “default” value that you used as a modifier for the animation modifier?

Well, it’s a static property of the Animation type, and it represents an Animation instance.

An “Animation” is a small collection of data that defines the properties of a resulting animated effect. These properties include; the duration (that is, how long the animation takes); the timing curve; or, alternatively, properties for driving a spring-based animation.

Creating Animation instances with static properties allows for the most control.

The easeIn method produces a basic animation with an “ease-in” timing curve, and a given duration. There are variants for the other preset timing curves: .easeOut, .easeInOut, and linear. Omitting the duration gives you a default duration of 0.35 seconds.

And that “default” static property? It’s the same as ease-in-out, with a 0.35-second duration!

All of these animation options take you on some kind of interpolated journey: it begins at –let’s call it “Value A”…

…and ends, at value Value B.

With the spring method, on the other hand, your animation might overshoot Value B, and oscillate back and forth, before finally stopping there. It’s bouncy! Once you create your animation instance, you can use the following modifiers:

You can delay the animation by a number of seconds. And you can repeat it a given number of times. If autoreverses is true, it plays the effect forwards and backwards instead of restarting the animation on each repeat.

repeatsForever is the same idea. Just infinite. And speed allows you to quicken or slow down the animation.

It’s a real joy to quickly iterate with your layout and UI effects. So I encourage you to try out all of the options available to you, with the examples we’re going over in this course.