使用SwiftUI制作酷炫颜色切换动画

2023-10-30 18:38:03

SwiftUI打造炫酷颜色切换动画

序言

各位SwiftUI爱好者，准备好见证SwiftUI的魅力，我们将通过Paths和AnimatableData打造一个酷炫的颜色切换动画！本文的关键在于创建一个遵循Shape协议的SwiftUI结构体，让我们踏上这一动画之旅吧！

构思SplashShape

struct SplashShape: Shape {
    var progress: Double

    func path(in rect: CGRect) -> Path {
        // 定义路径
        var path = Path()

        // 添加起始圆弧
        path.addArc(center: CGPoint(x: rect.midX, y: rect.midY), radius: rect.width / 2, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 360 * progress), clockwise: false)

        // 返回路径
        return path
    }
}

SplashShape结构体实现了Shape协议，它定义了一个progress属性，用于控制动画的进度。path(in rect:)方法根据progress值创建路径，绘制一个圆弧，从0度开始，随着progress的增加，圆弧逐渐增长。

运用AnimatableData

class AnimationViewModel: ObservableObject {
    @Published var progress: Double = 0.0

    func startAnimation() {
        // 开始动画
        withAnimation(.linear(duration: 1)) {
            progress = 1.0
        }
    }
}

AnimationViewModel是一个可观察的对象，它包含一个@Published的progress属性，用于控制SplashShape的进度。startAnimation()方法启动一个持续1秒的线性动画，使progress从0逐渐变为1.0。

SwiftUI视图

struct ContentView: View {
    @ObservedObject var animationViewModel = AnimationViewModel()

    var body: some View {
        // 创建一个ZStack，在上面绘制SplashShape和启动按钮
        ZStack {
            // 定义颜色数组，用于颜色切换
            let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .indigo, .violet]

            // 根据progress值选择颜色
            let colorIndex = Int(animationViewModel.progress * Double(colors.count - 1))
            let color = colors[colorIndex]

            // 绘制SplashShape，并应用颜色
            SplashShape(progress: animationViewModel.progress)
                .fill(color)
                .frame(width: 200, height: 200)

            // 添加一个按钮来启动动画
            Button(action: animationViewModel.startAnimation) {
                Text("开始动画")
            }
        }
    }
}

ContentView是SwiftUI视图，其中包含AnimationViewModel的观察者，它使用ZStack将SplashShape和启动按钮组合在一起。SplashShape的progress属性绑定到animationViewModel的progress属性，并使用颜色的数组根据progress值动态改变填充颜色。Button用于启动动画。