Transitions play a vital role in the user experience of our apps. They are visual keys signalizing that the app or screen context is changing.
In this article, we will go through all important parts related to the implementation of transitions in SwiftUI - from the very basics to more advanced techniques. At the end of this article, you will be able to implement transitions like this:
Triggering the transition
Let us remind, what the transition is:
Transition is an animation that might be triggered when some View is being added to or removed from the View hierarchy
In practice, the change in the view hierarchy can usually come from the conditional statements, so let us have a look at the following example.
There is a Text that is displayed only in the situation when
showText is true. It is important to mention:
- The state change needs to be done withing
withAnimation()block. If you explicitly state the animation here, it will affect the transition timing curve and duration.
- By default, the transition is fade in /fade out. We will see below, how to change it
- Note how layout changes and adapts to additional view causing the button itself to jump a bit lower. This behavior is completely valid for our situation with VStack, just keep in mind that inserted/removed view may affect surrounding views.
A transition may be triggered also when changing
.id() of a view. In such situation, SwiftUI removes the old View and creates a new one which may trigger transition on both old and new views.
To change the default transition we can set up a new one using
.transition view modifier. There are several types already available for basic view transformations
In our example, let me demonstrate the usage of
move transition that shifts view being added/removed from/towards the leading edge of its frame. We just need to apply
.transition(.move(edge: .leading)) to our text view.
Feel free to experiment with the other types.
The list of basic transitions is pretty short and most probably would not be sufficient, but luckily we can create more complex transitions with two powerful mechanisms
- transition combination
- transition created from any view modifier
You can combine two transitions using
.combine(with:) method that returns a new transition that is the result of both transitions being applied.
The amount of transition combinations is not limited, so for example this combination of opacity, scale and move transition is perfectly fine:
In case you require to perform different transition on removal than on insertion, it is possible to create asymetric transition using the static function
asymmetric(...), for example
Asymetric transitions are especially handy in situations when the inserted view could overlap the removed view and thus produce unaesthetic animation.
The creative part begins with the possibility to define your own transition based on view modifiers. Let me start with a very simple example to demonstrate the basics.
Here is a custom view modifier that masks the view with a rounded rectangle shape. The value parameter is expected to have values between 0 and 1 when 0 clips the view entirely and 1 reveals the full view.
Now, we can define custom transition that applies this effect as follows:
Note: To ease future re-usability, it may be beneficial to define your transitions as static members of AnyTransition:
when used at our example
.transition(.clipTransition), the result looks like this:
Please note that:
- modifier transition depends on two states: active and identity. Identity is applied when the view is fully inserted in the view hierarchy and active when the view is gone.
- During the transition, SwiftUI interpolates between these two states, and thus the type of active and identity modifier needs to be the same! (XCode will complain otherwise)
So far we went through quite basic stuff so maybe, you have not realized how powerful all these things are. Making a transition from custom view modifiers allows you to unleash your creativity and with a little help of Geometry Effect, AnimatableModifier or blending modes you can create transitions that stand out. Let me showcase several examples:
Counting up transition
Handy for score or achievement screens, count up to the value of Text view using this simple AnimatableModifier:
In this case, we need to provide a parameter to the transition itself, so I have prepared simple extension that will provide us with the right transition:
And for the sake of excercise, we will combine it with the
.scale transition when applied to the view:
Taking content apart
Combining several layers of content in the view modifier is my absolute favorite way to create unique transitions. The sliding door transition is a nice way how to demonstrate this approach
Once again, let me start with the effect itself:
This effect duplicates the view content into ZStack and masks/clips only the left part of the bottom layer and right part of the top layer. Both copies of the content are later moved apart depending on the shift parameter.
You can go really crazy when mixing multiple occurrences of the content so please, bear in mind that
- mixing many (hundrets) content layers may lead to performance issues. The identity modifier remains applied even when the transition finished
- even though I refer to the content layers as copies they are different views of the same type!
- if the content is animated, it will remain live during the whole transition
- there might be some cuts visible even after the transition ends. If you encouter this situation, the solution may be to clip the sub-areas with slight (1-2px) overlap
The transition shown in the previous blog post about onboarding screens was also done with this approach. The only difference is that the view is cut into quarters.
The best way to learn something new is to practice it. So for this topic, I have a challenge for you.
Implement transition that explodes the view on removal. Example:
How to do it?
- start with a Geometry Effect that animates a view along a curve
- prepare a masking shape for content sub-regions
- create an explosion effect that multiplies the content into many sub-regions, masking each one of them with relevant clipShape and offsetting using the effect from the first step
- wrap new effect into transition