预览效果
这是一个很简单的 loading 加载效果，在 ZStack 中构建三个 Circle 并添加上偏移和旋转的 animation 动画就能完成这个效果了，你只需要在需要的展示加载效果的时候展示这个动画就行。
实现代码
ZStack {
// 创建三个圆点
Circle()
.fill(color)
.frame(height: frame.height)
.offset(y: isLoading ? -frame.height : 0)
Circle()
.fill(color)
.frame(height: frame.height)
.offset(x: isLoading ? -frame.height : 0)
.offset(y: isLoading ? frame.height : 0)
Circle()
.fill(color)
.frame(height: frame.height)
.offset(x: isLoading ? frame.height : 0)
.offset(y: isLoading ? frame.height : 0)
}
// 为上面的偏移效果添加线性动画、来回循环执行
.animation(Animation.easeInOut(duration: timing).repeatForever(autoreverses: true), value: isLoading)
.frame(width: frame.width, height: frame.height, alignment: .center)
// 旋转360度
.rotationEffect(Angle(degrees: isLoading ? 360 : 0))
// 为旋转添加动画、不倒放
.animation(Animation.easeInOut(duration: timing).repeatForever(autoreverses: false), value: isLoading)
简单说明
上面的代码已经是实现这个功能的关键代码了，下方附上能够直接运行的示例Demo，设置了一瓶可乐(精神氮泵)的费用。
完整示例Demo下载
本文自 https://www.codeun.com 发布，相应代码均自主编写并严格审阅和测试，完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载，请注明出处：https://www.codeun.com/archives/1180.html ·