Basics of SwiftUI Animations
A simple step to step guide to getting started with basic SwiftUI Animation
Before we dive into “how to create animations”, let’s just go through what is animation and how does it work in SwiftUI, in order to implement animation there has to be some view that changes. In other terms, all the view have 2 states one is the start and another one is the end state and the transition among the state is called the animation.
As shown above, we can say that view has three parts. i.e., start, change and stop. The start is the initial state of the view, change is where the animation takes place, and stop is the ending or destination state of the view.
Let’s also take a look into exactly what can be animated in SwiftUI, it’s not a general rule but just to keep it simple.
Anything that has a numerical property can be animated like positions, size, color, rotation etc.
In SwiftUI, we have two type of animations, explicit and implicit.
Explicit Animation
The second type of animation in SwiftUI is called explicit animation. It is defined with a withAnimation { … } closure, and only the parameter values changed inside the braces will be animated. Basically here we are explicitly asking SwiftUI to animate changes occurring as the result of a state change.
Implicit Animation
Implicit animations are the quickest way to implement animation overviews. It’s the simplest kind of animation in SwiftUI and the modifier is used for any changes that happen within the view.
I am going to cover Implicit animations and it’s types in this blog, so let’s get started.
SwiftUI has built-in support for animations with its animation() modifier. To use this modifier, place it after any other modifiers for your views, and tell it what kind of animation you want.
Let’s dig deep into three different types of Implicit Animations:
- Basic Animation
- Spring Animation
- Interpolation Spring Animation
1. Basic Animations
There are plenty of basic animation curves available by default in SwiftUI, and the selection of the animation curves mainly depends on the speed of the animation. As default, the animation starts slow, speeds up, and then ends slow.
Other animations with different behavior as follows,
- linear: The animation is performed at a constant speed for the specified duration.
- easeOut: The animation starts out fast and slows as the end of the sequence approaches.
- easeIn: The animation sequence starts out slow and speeds up as the end approaches.
- easeInOut: The animation starts slow, speeds up, and then slows down again.
👁 It should look like this in Xcode:
All of the above-mentioned animations also have a property named “duration”, it is very useful when we want to change the default duration of the animation, by default it is 0.35 seconds.
👁 It should look like this in Xcode:
2. Spring Animation
Other than basic animations, SwiftUI also has built-in support for spring animations. i.e., animations that move to their target point, overshoot a little, then bounce back.
If you just use .spring() by itself, with no parameters, you get a sensible default. So, this creates a spring animation that rotates a button by 45 degrees every time it’s tapped:
👁 It should look like this in Xcode:
If you want more control over spring animation then you can also pass parameters like a response, dampingFraction, and blendDuration.
response: The stiffness of the spring, defined as an approximate duration in seconds. A value of zero requests an infinitely-stiff spring, suitable for driving interactive animations.
dampingFraction: The amount of drag applied to the value being animated, as a fraction of an estimate of amount needed to produce critical damping.
blendDuration: The duration in seconds over which to interpolate changes to the response value of the spring.
3. Interpolating Spring Animation
SwiftUI also has interpolating spring animation, which means if you trigger the animation several times the spring effect will get stronger and stronger as the springs combine. It has the following parameter to make animation more customized,
mass: The mass of the object attached to the spring.
stiffness: The stiffness of the spring.
damping: The spring damping value.
intialVelocity: The initial velocity of the spring, as a value in the range [0, 1] representing the magnitude of the value being animated.
Conclusions: In SwiftUI, Animation is nothing but the change of the state from start to finish with different curves and velocities. The syntax is mostly easy to understand and quick to implement. Animating is quite easy with the use of different implicit animation like easeIn, easeOut, linear, spring, and interpolating spring. We can create awesome animations with just a few lines of code in SwiftUI.
Hope these helped you out and you learned something new today, if you enjoyed reading this article be sure to throw me a couple of claps.👏
Happy Coding!
