前言
为了更加熟悉和了解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() } ) } } 复制代码
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
