SwiftUI Codes

Best SwiftUI Code Warehouse

Lesson 9: Animations with SwiftUI

Objective:

Learn how to create animations and transitions.

Content:

1. Basic Animations

Animating views in SwiftUI is straightforward using the withAnimation function.

Applying Animations:

@State private var scale: CGFloat = 1.0

var body: some View {
    VStack {
        Text("Tap to Animate")
            .scaleEffect(scale)
            .onTapGesture {
                withAnimation {
                    scale = scale == 1.0 ? 1.5 : 1.0
                }
            }
    }
}Copy Code

Explanation:

• @State private var scale: CGFloat = 1.0: Declares a state variable to hold the scale value.
• Text("Tap to Animate"): Displays a text view with the string "Tap to Animate".
• .scaleEffect(scale): Applies a scaling transformation to the text view based on the scale value.
• .onTapGesture { withAnimation { scale = scale == 1.0 ? 1.5 : 1.0 } }: Toggles the scale value between 1.0 and 1.5 with an animation when the text is tapped.

Animating Colors:

@State private var isRed = false

var body: some View {
    VStack {
        Text("Tap to Change Color")
            .foregroundColor(isRed ? .red : .blue)
            .onTapGesture {
                withAnimation {
                    isRed.toggle()
                }
            }
    }
}Copy Code

Explanation:

• @State private var isRed = false: Declares a state variable to hold the color state.
• Text("Tap to Change Color"): Displays a text view with the string "Tap to Change Color".
• .foregroundColor(isRed ? .red : .blue): Sets the text color based on the value of isRed.
• .onTapGesture { withAnimation { isRed.toggle() } }: Toggles the isRed value with an animation when the text is tapped.

2. Implicit Animations

Using the .animation modifier to create implicit animations.

Using .animation Modifier:

@State private var rotation: Double = 0

var body: some View {
    Image(systemName: "arrow.right.circle")
        .rotationEffect(.degrees(rotation))
        .animation(.easeInOut(duration: 1), value: rotation)
        .onTapGesture {
            rotation += 45
        }
}Copy Code

Explanation:

• @State private var rotation: Double = 0: Declares a state variable to hold the rotation angle.
• Image(systemName: "arrow.right.circle"): Displays a system image with the name "arrow.right.circle".
• .rotationEffect(.degrees(rotation)): Applies a rotation transformation to the image based on the rotation angle.
• .animation(.easeInOut(duration: 1), value: rotation): Applies an ease-in-out animation with a duration of 1 second when the rotation value changes.
• .onTapGesture { rotation += 45 }: Increments the rotation angle by 45 degrees when the image is tapped.

3. Explicit Animations

Creating custom animations with the withAnimation function.

Customizing Animations:

@State private var offset: CGFloat = 0

var body: some View {
    Text("Slide me")
        .offset(x: offset)
        .onTapGesture {
            withAnimation(.spring()) {
                offset = offset == 0 ? 100 : 0
            }
        }
}Copy Code

Explanation:

• @State private var offset: CGFloat = 0: Declares a state variable to hold the offset value.
• Text("Slide me"): Displays a text view with the string "Slide me".
• .offset(x: offset): Applies an offset to the text view based on the offset value.
• .onTapGesture { withAnimation(.spring()) { offset = offset == 0 ? 100 : 0 } }: Toggles the offset value between 0 and 100 with a spring animation when the text is tapped.

Combining Multiple Animations:

@State private var scale: CGFloat = 1.0
@State private var rotation: Double = 0

var body: some View {
    VStack {
        Text("Tap to Animate")
            .scaleEffect(scale)
            .rotationEffect(.degrees(rotation))
            .onTapGesture {
                withAnimation(.easeInOut(duration: 1)) {
                    scale = scale == 1.0 ? 1.5 : 1.0
                    rotation += 45
                }
            }
    }
}Copy Code

Explanation:

• @State private var scale: CGFloat = 1.0: Declares a state variable to hold the scale value.
• @State private var rotation: Double = 0: Declares a state variable to hold the rotation angle.
• Text("Tap to Animate"): Displays a text view with the string "Tap to Animate".
• .scaleEffect(scale): Applies a scaling transformation to the text view based on the scale value.
• .rotationEffect(.degrees(rotation)): Applies a rotation transformation to the text view based on the rotation angle.
• .onTapGesture { withAnimation(.easeInOut(duration: 1)) { scale = scale == 1.0 ? 1.5 : 1.0; rotation += 45 } }: Toggles the scale and rotation values with an ease-in-out animation when the text is tapped.

4. Custom Animations

Creating custom animations with the Animation struct.

Creating Custom Animations:

@State private var opacity: Double = 1.0

var body: some View {
    Text("Fade in and out")
        .opacity(opacity)
        .onAppear {
            withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                opacity = 0.0
            }
        }
}Copy Code

Explanation:

• @State private var opacity: Double = 1.0: Declares a state variable to hold the opacity value.
• Text("Fade in and out"): Displays a text view with the string "Fade in and out".
• .opacity(opacity): Applies an opacity modifier to the text view based on the opacity value.
• .onAppear { withAnimation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true)) { opacity = 0.0 } }: Animates the opacity value from 1.0 to 0.0 with an ease-in-out animation, repeating forever and autoreversing.