SwiftUI制作风筝摇摆动画，一起放飞梦想！

2024-02-13 20:31:55

在 iOS 开发中，动画效果可以为应用增添活力，提升用户体验。今天，我们来一起探索如何在 SwiftUI 中实现一个简单的风筝摇摆动画。这个例子可以帮助你理解 SwiftUI 动画的基本原理，并将其应用到自己的项目中。

首先，我们需要创建一个新的 SwiftUI 项目。打开 Xcode，选择 "Create a new Xcode project"，然后选择 "App" 模板。在接下来的界面中，选择 SwiftUI 作为用户界面，并使用 Swift 作为编程语言。

项目创建完成后，打开 ContentView.swift 文件。这是 SwiftUI 应用的主视图文件，我们将在这里编写代码来实现风筝摇摆动画。

为了模拟风筝的摇摆，我们将使用 SwiftUI 的 rotationEffect 修饰符。这个修饰符可以将视图旋转指定的角度。我们还需要一个状态变量来控制风筝的旋转角度，使其在一定范围内来回变化。

在 ContentView 结构体中，添加一个名为 isKiteSwinging 的状态变量：

@State private var isKiteSwinging = false

这个变量是一个布尔值，用来表示风筝是否正在摇摆。初始值为 false，表示风筝静止不动。

接下来，在 body 属性中添加一个按钮和一个风筝图像：

var body: some View {
    VStack {
        Button("放风筝") {
            withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
                isKiteSwinging.toggle()
            }
        }

        Image(systemName: "paperplane.fill")
            .font(.system(size: 100))
            .rotationEffect(.degrees(isKiteSwinging ? 30 : -30))
    }
}

按钮的点击事件会触发一个动画，这个动画会改变 isKiteSwinging 的值，从而使风筝开始或停止摇摆。我们使用 withAnimation 函数来包裹代码块，使其具有动画效果。.easeInOut(duration: 2) 表示动画使用缓入缓出效果，持续时间为 2 秒。.repeatForever(autoreverses: true) 表示动画会无限循环，并且每次循环都会反转方向。

风筝图像使用 Image(systemName: "paperplane.fill") 来创建一个系统图标。.font(.system(size: 100)) 设置图标的大小。.rotationEffect(.degrees(isKiteSwinging ? 30 : -30)) 根据 isKiteSwinging 的值来旋转风筝，当 isKiteSwinging 为 true 时，风筝旋转 30 度；当 isKiteSwinging 为 false 时，风筝旋转 -30 度。

现在，运行你的项目，点击 "放风筝" 按钮，你就会看到风筝开始摇摆了！