在本章中，你将学会使用​​SwiftUI​​风筝摇摆动画。

前言

为了更加熟悉和了解​​SwiftUI​​，本系列将从实战角度出发完成100个SwiftUI项目，方便大家更好地学习和掌握​​SwiftUI​​。

这同时也是对自己学习​​SwiftUI​​过程的知识整理。

如有错误，以你为准。

项目背景

有一次周末在海边晃悠，抬头看到好多风筝在天空自由的翱翔，有些风筝一节接着一节在空中摇荡甚是壮观。

突然脑海里有了些许灵感，是不是可以把这个景象使用SwiftUI做一个动画？

说干就干。

项目搭建

首先，创建一个新的​​SwiftUI​​​项目，命名为​​MagicAnimation​​。

页面样式

首先是图片部分，这里我们可以使用​​Apple​​​官方提供的​​系统图标​​作为展示的样式，也可以使用导入的图片作为样式设计的元素，示例：

Image(systemName: "heart.circle")
    .font(.system(size: 32))
    .foregroundColor(.purple)

为了实现翻页切换效果，我们需要声明一个变量作为切换，示例：

@State var isSwitch:Bool = false

声明好变量​​isSwitch​​​后，我们根据​​isSwitch​​​的状态可以设置切换​​Image​​图标图片和图片填充颜色，示例：

Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
    .font(.system(size: 32))
    .foregroundColor(isSwitch ? .red : .purple)

当我们把​​isSwitch​​​变成​​true​​时，预览效果如下：

接下来，我们通过​​ForEach​​循环遍历多一些图片，示例：

HStack{
    ForEach(0..<8) { num in
        Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
            .font(.system(size: 32))
            .foregroundColor(isSwitch ? .red : .purple)
    }
}

上述代码中，我们使用​​HStack​​​横向布局和​​ForEach​​​循环，遍历展示了​​8个​​图标图片。

至此，我们的样式部分就完成了。

交互动画

由于我们需要使用拖动动画，我们先声明一个变量来存储拖动的位置，示例：

@State private var dragAmount = CGSize.zero

然后在​​Image​​加上一个偏移修饰符，并且增加拖动动画，示例：

HStack {
    ForEach(0 ..< 8) { num in
        Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
            .font(.system(size: 32))
            .foregroundColor(isSwitch ? .red : .purple)
            .offset(self.dragAmount)
    }
}
.gesture(
    DragGesture()
        .onChanged { self.dragAmount = $0.translation }
        .onEnded { _ in
            self.dragAmount = .zero
            self.isSwitch.toggle()
        }
)

上述代码中，我们给​​Image​​​添加了一个偏移量修饰符​​offset​​​，偏移位置为​​dragAmount​​。

然后给​​HStack​​​整个横向视图增加拖动动画​​DragGesture​​​，在拖动时，更改偏移量的位置为拖动的位置，在拖动结束时，我们将视图复位​​dragAmount​​​到初始位置​​zero​​​，并且切换样式状态​​isSwitch​​。

好像看起来效果一般，不够优雅。

我们再加一个交互动画，让几个​​Image​​有延迟错落感，示例：

.animation(
     Animation.default.delay(Double(num) / 20), value: dragAmount
)

项目展示

本章代码

import SwiftUI

struct ContentView: View {
    @State var isSwitch: Bool = false
    @State private var dragAmount = CGSize.zero

    var body: some View {
        HStack {
            ForEach(0 ..< 8) { num in
                Image(systemName: isSwitch ? "heart.circle.fill" : "heart.circle")
                    .font(.system(size: 32))
                    .foregroundColor(isSwitch ? .red : .purple)
                    .offset(self.dragAmount)
                    .animation(
                        Animation.default.delay(Double(num) / 20), value: dragAmount
                    )
           }
        }
        .gesture(
            DragGesture()
                .onChanged { self.dragAmount = $0.translation }
                .onEnded { _ in
                    self.dragAmount = .zero
                    self.isSwitch.toggle()
                }
        )
    }
}

恭喜你，完成了整个项目的全部内容！

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～