EnglishTechSwiftUI

[ SwiftUI ] Object Animation parameter behavior comparison

eye-catch English

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

[ads]

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

[ads]

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”.

Move 50%

“default”, “easeInOut” and “linear” moved just halfway. “easeIn” didn’t reach halfway whereas “easeOut” exceeded halfway.

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.


Summary

[ads]
  • “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.

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)
    }
}
Ads