基础动画

在 SwiftUI 中，动画可以让你的应用变得更加生动和互动。基础动画可以通过简单的视图修改和动画修饰符轻松实现。以下是关于 SwiftUI 中基础动画的详细介绍和示例。

1. 使用 withAnimation

withAnimation 是 SwiftUI 中实现动画的主要方式之一。它允许你将状态变化包裹在一个动画块中。

示例：基础动画

import SwiftUI

struct BasicAnimationExample: View {
    @State private var isScaled = false

    var body: some View {
        VStack {
            Button("Tap to Scale") {
                withAnimation {
                    isScaled.toggle() // 切换状态
                }
            }
            .font(.title)
            .padding()
            .scaleEffect(isScaled ? 2.0 : 1.0) // 根据状态调整缩放比例
            .animation(.easeInOut) // 设置动画类型
        }
        .padding()
    }
}

2. 使用 Animation 修饰符

可以直接在视图上使用 animation 修饰符，以便在状态变化时自动应用动画。

示例：Animation 修饰符

struct AnimationModifierExample: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            Button("Toggle Visibility") {
                isVisible.toggle() // 切换可见性
            }
            .font(.title)
            .padding()

            Circle()
                .fill(Color.blue)
                .frame(width: isVisible ? 200 : 0, height: isVisible ? 200 : 0) // 根据状态调整大小
                .animation(.easeInOut) // 设置动画类型
        }
        .padding()
    }
}

3. 组合动画

可以将多个动画组合在一起，以实现更复杂的效果。

示例：组合动画

struct CombinedAnimationExample: View {
    @State private var isRotated = false

    var body: some View {
        VStack {
            Button("Tap to Rotate") {
                withAnimation {
                    isRotated.toggle() // 切换旋转状态
                }
            }
            .font(.title)
            .padding()

            Image(systemName: "arrow.right.circle.fill") // 使用 SF Symbols
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(isRotated ? 180 : 0)) // 根据状态调整旋转角度
                .animation(.easeInOut) // 设置动画类型
        }
        .padding()
    }
}

4. 定时动画

可以使用 Animation 类型的 delay 和 duration 属性来设置动画的时机和持续时间。

示例：定时动画

struct TimedAnimationExample: View {
    @State private var isBouncing = false

    var body: some View {
        VStack {
            Button("Start Bouncing") {
                withAnimation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
                    isBouncing.toggle() // 切换状态
                }
            }
            .font(.title)
            .padding()

            Circle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .offset(y: isBouncing ? -30 : 0) // 根据状态调整偏移
        }
        .padding()
    }
}

5. 结束时的动画

可以使用 onAppear 和 onDisappear 来在视图出现或消失时触发动画。

示例：视图出现时的动画

struct OnAppearAnimationExample: View {
    @State private var scale: CGFloat = 0.0

    var body: some View {
        Circle()
            .fill(Color.red)
            .frame(width: 100, height: 100)
            .scaleEffect(scale) // 根据状态调整缩放
            .onAppear {
                withAnimation(.easeIn(duration: 1)) {
                    scale = 1.0 // 视图出现时动画
                }
            }
            .onDisappear {
                withAnimation(.easeOut(duration: 1)) {
                    scale = 0.0 // 视图消失时动画
                }
            }
            .padding()
    }
}

6. 总结

  • 基础动画：使用 withAnimation 和 animation 修饰符实现简单的动画效果。
  • 组合动画：可以通过修改多个属性来创建更复杂的动画效果。
  • 定时动画：可以设置动画的持续时间和延迟，以控制动画的时机。
  • 视图生命周期动画：通过 onAppear 和 onDisappear 管理视图出现和消失时的动画。

通过这些基础动画技巧，可以为 SwiftUI 应用增添生动的视觉效果，提升用户体验。

Last Updated::