0
点赞
收藏
分享

微信扫一扫

水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~

项目背景

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

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

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

说干就干。

项目搭建

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

水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~_Swift

逻辑分析

隔空投送的动画元素比较简单,我们可以看到是由一个​​Image​​​图标和一圈圈“​​水波​​​”组成,然后“​​水波​​​”一圈一圈出现又消失,形成一种“​​涟漪​​”效果。

那么样式部分,我们就可以先完成中心的​​Image​​图标,再加上一圈圈的圆。交互部分,我们可以让圆出现后消失,模拟水波效果。

样式部分

首先是中间的隔空投送的图标,我们使用​​Image​​完成基本的样式,示例:

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

水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~_swift_02

水波涟漪我们可以看作一圈圈的圆,而且这些圆是叠加的层级进行排布,示例:

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

项目预览

水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~_swift_03

恭喜你,完成了本章的全部内容!

快来动手试试吧。

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

举报

相关推荐

0 条评论