我正在参与掘金创作者训练营第5期， 点击了解活动详情。
在本章中，你将学会使用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()
}
)
}
}
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～