Explicit Animation in SwiftUI 🪄

Photo by Alexander Andrews on Unsplash

⏪ Quick Recap

SwiftUI has 2 types of animation variations -

1. Implicit Animation
2. Explicit Animation

However, if you do not know what animation is and how it works in SwiftUI, you should first read the Basics of SwiftUI Animations.

I’m covering Explicit animation and its variations in this blog, so let’s get started.

About Explicit Animation:

All eligible changes made as a result of executing a block of code will be animated together. You can supply the animation (duration, curve, etc.) to use and the block of code.

withAnimation(.linear(duration: 2)) { 
// do something that will cause ViewModifier/Shape arguments to change somewhere 
}

Note that this is an imperative code in your view. It will appear in closures like .onTapGesture.

Explicit animations are almost always wrapped around calls to ViewModel functions and also around things that only change the UI, like “entering editing mode.” It’s quite rare for code that handles a user gesture not to be wrapped in withAnimation.

Example of Explicit animation 👀

Output:

Variations of using Explicit Animations 🗂

1. Path
Animating a path is an easy way to add a natural, smooth effect to your app.

2. Geometry Effect
GeometryEffect is a protocol that conforms to Animatable and ViewModifier. To conform with GeometryEffect, you need to implement the following method:

func effectValue(size: CGSize) -> ProjectionTransform

Let’s say your method is called SkewEffect; now, to apply it to a view, you would have to use it like this:

Text("Hello").modifier(SkewEfect(skewValue: 0.5))

Text("Hello") will be transformed with the matrix created by the SkewEfect.effectValue() method, as simple as that. Note that the changes will affect the view, but not the layout of its ancestors or descendants.

As GeometryEffect also conforms toAnimatable, you have to add an animatableData property to have an Animatable effect.

You might not be aware, but you are probably using GeometryEffect all the time. If you ever used .offset(), you are actually using GeometryEffect.

Example of Path and GeometryEffect

Let me give you a basic example of combined path and GeometryEffect.

In the above example, I’ve taken a circle with stroke property as a path and put ✈️ (airplane) image upon the stroked circle using .offsetand move that image 360 degrees on repeat. So that it will look something like:

Output:

You can make your own animation like the below image as well.

Credits: SwiftUI Labs

3. Animatable Modifier (Deprecated)

• Animatable describes how to animate a view with respect to some change in the view’s data.
• Use Animatable when you are unable to achieve the animation you want with animation(_:) or withAnimation(_:_:).
• Animatable allows fine-grained control over the animation of a SwiftUI view’s animatable values. It does so by requiring ‘animatableData: AnimatableData’, which represents a view’s animatable data.
• By conforming to Animatable, you can effectively decouple the animation of your view from the concept of duration, as you give SwiftUI the ability to interpolate arbitrarily between two different values for animatableData. This is also why AnimatableData must conform to VectorArithmetic, which provides the runtime means to add, subtract and scale the animated values as necessary to generate data points for each frame of the animation over an arbitrary time interval.

protocol AnimatableModifier : Animatable, ViewModifier

A modifier that can create another modifier with animation. Read in detail

Let’s see a simple example of it.

Output

Credits:- SWIFTUI Labs

You can check out more amazing animations here.

Further notes

Animatable, along with View, is currently broken on iOS 14; please use AnimatableModifier

Conclusion

I’m sure the above animation brief will help you a lot. Start with small animations, as it will give you more clarity on how it works.

Hope these tips helped you learn something new today! If you enjoyed reading this article, be sure to throw me a couple of claps 🖐.

Let me know what you think and share your favorite animations (Implicit/Explicit) with us in the comment section.