In this article, I will show the behavior comparison regarding which parameter is indicated in the animation modifier in the Object, such as Circle, Rectangle, and so on, in SwiftUI.
Since it is better for us to look at the actual behavior than the words, I will show you the movie how each animation parameter reflects the Object move behavior.
Xcode: 13.2.1 iOS: 15.2 Swift: 5
Types of animation parameters in SwiftUI
First, let’s confirm the official document. According to this document, there are five types of animation parameters that can be set in the animation modifier.
Let’s take a look at it briefly.
default
Nothing is mentioned in the official document, however, it seems to be the same as easeInOut.
easeIn
Move with speed up increasingly.
easeOut
Move with high speed, then speed down decreasingly.
easeInOut
Move as “easeIn” down to the middle, then move as “easeOut”.
linear
Move with the constant speed.
Animation Comparison in SwiftUI
With the above knowledge, let’s confirm the actual behavior of an iOS app as follows. The video speed has been set to 10% of the actual speed in order to understand.
To more understand, I will provide the snapshot images which are in the 25%, 50%, and 75% of the way to move.
Move 25%
“easeOut” moved more distance than others at this moment. Also, “linear” moved a little more distance than “default” and “easeInOut”.
![](https://www.harubears.com/wp-content/uploads/2022/02/snapshot-25-1024x684.jpg)
Move 50%
“default”, “easeInOut” and “linear” moved just halfway. “easeIn” didn’t reach halfway whereas “easeOut” exceeded halfway.
![](https://www.harubears.com/wp-content/uploads/2022/02/snapshot-50-1024x684.jpg)
Move 75%
“default” and “easeInOut” moved almost the entire way of distance next to “easeOut”. “linear” moved 75% of the distance. “easeIn” still have around 40% of the remaining but will speed up in order to reach the goal with the same timing as others.
![](https://www.harubears.com/wp-content/uploads/2022/02/snapshot-75-1024x684.jpg)
Summary
- “default” parameter is the same as “easeInOut”
- “easeOut”: start with high speed, then slow down
- “easeIn”: start with low speed, then speed up
- “linear”: move the same speed.
Related Articles
Sample Code
import SwiftUI struct AnimationComparisonView: View { @State var offset: CGSize = .zero var body: some View { VStack { Button(action: {self.tapToMove()}) { Text("Tap to Move!") } .padding() Group { Text("default") Circle() .frame(width: 20, height: 20, alignment: .center) .animation(.default, value: offset) .offset(offset) Divider() } Group { Text("easeInOut") Circle() .frame(width: 20, height: 20, alignment: .center) .animation(.easeInOut, value: offset) .offset(offset) Divider() } Group { Text("easeIn") Circle() .frame(width: 20, height: 20, alignment: .center) .animation(.easeIn, value: offset) .offset(offset) Divider() } Group { Text("easeOut") Circle() .frame(width: 20, height: 20, alignment: .center) .animation(.easeOut, value: offset) .offset(offset) Divider() } Group { Text("linear") Circle() .frame(width: 20, height: 20, alignment: .center) .animation(.linear, value: offset) .offset(offset) Divider() } } .onAppear() { self.offset = CGSize(width: -380, height: 0) } } private func tapToMove() { self.offset = CGSize(width: self.offset.width * (-1), height: 0) } }