携手创作，共同成长！这是我参加「日新计划 · 8 月更文应战」的第28天，点击检查活动详情。

项目布景

使用iPhone以来，最好用的莫过于隔空投送了，只要在同一个局域网下，公司里使用iPhone的童鞋都能够相互快速的共享照片、文件。

而且iPhone接收到的文件，也能快速地投送到MacBook中，也能共享给iPad……

享受功能服务的我发现iPhone隔空投送动画挺好意思，有点像“水波涟漪”的作用，就想着使用SwiftUI做一个仿iPhone隔空投送动画。

说干就干。

项目搭建

首先，创立一个新的SwiftUI项目，命名为SwiftUIAirDrop。

1.png

逻辑分析

隔空投送的动画元素比较简单，咱们能够看到是由一个Image图标和一圈圈“水波”组成，然后“水波”一圈一圈呈现又消失，形成一种“涟漪”作用。

那么款式部分，咱们就能够先完结中心的Image图标，再加上一圈圈的圆。交互部分，咱们能够让圆呈现后消失，模拟水波作用。

款式部分

首先是中心的隔空投送的图标，咱们使用Image完结根本的款式，示例：

Image(systemName: "antenna.radiowaves.left.and.right.circle.fill")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 60, height: 60)
    .foregroundColor(.blue)

2.png

水波涟漪咱们能够看作一圈圈的圆，而且这些圆是叠加的层级进行排布，示例：

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()
    }
}

项目预览

3.gif

祝贺你，完结了本章的全部内容！

快来着手试试吧。

如果本专栏对你有帮助，无妨点赞、评论、重视～