SwiftUI 简单的三点旋转加载动画效果

预览效果

SwiftUI 简单的三点旋转加载动画效果
SwiftUI 旋转加载效果

这是一个很简单的 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下载

SwiftUI 简单的三点旋转加载动画效果

旋转加载效果示例Demo

赞助会员赞助会员免费
资源价格 ¥2.00 销售数量 3 更新时间 2023-08-27
已付费?登录刷新

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1180.html ·

(0)
上一篇 2023-08-23 上午10:58
下一篇 2023-08-28 下午3:08

发表回复

登录后才能评论