携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情。
项目背景
使用iPhone以来，最好用的莫过于隔空投送了，只要在同一个局域网下，公司里使用iPhone的童鞋都可以互相快速的分享照片、文件。
而且iPhone接收到的文件，也能快速地投送到MacBook中，也能分享给iPad……
享受功能服务的我发现iPhone隔空投送动画挺好意思，有点像“水波涟漪”的效果，就想着使用SwiftUI做一个仿iPhone隔空投送动画。
说干就干。
项目搭建
首先，创建一个新的SwiftUI项目，命名为SwiftUIAirDrop。
逻辑分析
隔空投送的动画元素比较简单，我们可以看到是由一个Image图标和一圈圈“水波”组成，然后“水波”一圈一圈出现又消失，形成一种“涟漪”效果。
那么样式部分，我们就可以先完成中心的Image图标，再加上一圈圈的圆。交互部分，我们可以让圆出现后消失，模拟水波效果。
样式部分
首先是中间的隔空投送的图标，我们使用Image完成基本的样式，示例：
Image(systemName: "antenna.radiowaves.left.and.right.circle.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.foregroundColor(.blue)
水波涟漪我们可以看作一圈圈的圆，而且这些圆是叠加的层级进行排布，示例：
ZStack {
Image(systemName: "antenna.radiowaves.left.and.right.circle.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.foregroundColor(.blue)
Circle()
.stroke()
.frame(width: 340, height: 340)
.foregroundColor(.blue)
Circle()
.stroke()
.frame(width: 240, height: 240)
.foregroundColor(.blue)
Circle()
.stroke()
.frame(width: 150, height: 150)
.foregroundColor(.blue)
}
基础样式完成得差不多了，我们来加一点交互效果，水波涟漪的效果是从里向外展开，且由内向外逐渐消失。
我们可以声明一个动画变量进行控制，示例：
@State private var animateCircle = false
然后我们给圆加上缩放和显隐的修饰符，示例：
ZStack {
Image(systemName: "antenna.radiowaves.left.and.right.circle.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.foregroundColor(.blue)
Circle()
.stroke()
.frame(width: 340, height: 340)
.foregroundColor(.blue)
.scaleEffect(animateCircle ? 1 : 0.3)
.opacity(animateCircle ? 0 : 1)
Circle()
.stroke()
.frame(width: 240, height: 240)
.foregroundColor(.blue)
.scaleEffect(animateCircle ? 1 : 0.3)
.opacity(animateCircle ? 0 : 1)
Circle()
.stroke()
.frame(width: 150, height: 150)
.foregroundColor(.blue)
.scaleEffect(animateCircle ? 1 : 0.3)
.opacity(animateCircle ? 0 : 1)
}
最后，在视图加载时，我们调用动画且让动画每3秒循环1次，每次循环切换animateCircle变量状态，示例：
.onAppear {
withAnimation(.easeIn(duration: 3).repeatForever(autoreverses: false)){
self.animateCircle.toggle()
}
}
项目预览
恭喜你，完成了本章的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
