How to Build Animations in SwiftUI

SwiftUI provides an easy and intuitive way to create animations in your iOS app templates. With SwiftUI, you can create animations with just a few lines of code, and these animations can be applied to any SwiftUI view. In this tutorial, we'll explore five different animation examples that you can use to enhance your app's user experience.

For the React Native version, check out Instamobile's blog.

If you are interested in a more comprehensive tutorial, check out this amazing SwiftUI tutorial on Devbrite.

Example 1: Scaling Animation

Scaling animation is a simple and elegant way to add a visual effect to your views. Here's an example of how you can use scaling animation in SwiftUI:

struct ScalingAnimation: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        Image(systemName: "heart.fill")
            .font(.system(size: 100))
            .foregroundColor(.red)
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation {
                    self.scale += 0.2
                }
            }
    }
}

Code Explanation:

We create a @State property called scale, which is used to control the scale factor of the heart image.
In the body property, we create an Image view with the heart symbol and set its font size, foreground color, and scale effect.
We add a onTapGesture modifier to the image view that increments the scale property by 0.2.
We wrap the scale update in a withAnimation block, which animates the scale effect of the image view.

Example 2: Rotation Animation

Rotation animation can be used to add a playful and interactive element to your app's UI. Here's an example of how you can use rotation animation in SwiftUI:

struct RotationAnimation: View {
    @State private var angle: Double = 0.0

    var body: some View {
        Image(systemName: "gear")
            .font(.system(size: 100))
            .rotationEffect(.degrees(angle))
            .onTapGesture {
                withAnimation(.easeInOut(duration: 2)) {
                    self.angle += 360
                }
            }
    }
}

Code Explanation:

• We create a @State property called angle, which is used to control the rotation angle of the gear image.
• In the body property, we create an Image view with the gear symbol and set its font size, and rotation effect.
• We add a onTapGesture modifier to the image view that increments the angle property by 360.
• We wrap the angle update in a withAnimation block, which animates the rotation effect of the image view with an easeInOut timing curve and a duration of 2 seconds.

Example 3: Opacity Animation

Opacity animation can be used to fade in or out views, providing a subtle yet effective way to transition between views or elements in your app's UI. Here's an example of how you can use opacity animation in SwiftUI:

struct OpacityAnimation: View {
    @State private var opacity: Double = 1.0

    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.red)
            .opacity(opacity)
            .onTapGesture {
                withAnimation {
                    self.opacity -= 0.2
                }
            }
    }
}

Code Explanation:

• We create a @State property called opacity, which is used to control the opacity of the text view.
• In the body property, we create a Text view with the message "Hello, SwiftUI!" and set its