SwiftUI—如何制作循环动画并指定动画的循环次数

简介: SwiftUI—如何制作循环动画并指定动画的循环次数

在SwiftUI中,您可以非常方便地制作重复动画,反转动画,甚至可以指定动画的播放次数。


示例代码:


struct ContentView : View {
    @State var angle: Double = 0 //图像视图的旋转角度
    var animation: Animation {
        Animation.spring() //设置动画的时间曲线为弹性样式
             .repeatForever() //设置动画的播放为无限循环模式
//            .repeatForever(autoreverses: false) //使动画来回反弹
//            .repeatCount(3) //重复次数
    }
    var body: some View {
        VStack{
            Image("logo")
                .rotationEffect(Angle.init(degrees: angle)) //按照属性的大小,对图像视图进行旋转操作
                .animation(animation)
            Divider().fixedSize()
            Button(action: {
                self.angle += 45
            }) {
                Text("Repeat Forever Effect")
            }
        }
    }
}


2466108-688e748d14156fc5.gif


目录
相关文章
|
5月前
|
前端开发
HarmonyNext动画大全02-显式动画
HarmonyNext动画大全02-显式动画
81 2
HarmonyNext动画大全02-显式动画
|
5月前
ThreeJs手动控制动画播放与暂停
这篇文章介绍了如何在Three.js中手动控制动画的播放与暂停,包括设置动画混合器、监听按键事件以调整动画状态和速度的方法。
167 0
ThreeJs手动控制动画播放与暂停
|
10月前
|
前端开发 JavaScript API
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
2022年了!还在用定时器实现动画?赶紧试试requestAnimationFrame吧!
151 0
|
10月前
|
JavaScript 前端开发
jQuery 第五章(效果,滑动,动画,停止动画)
jQuery 第五章(效果,滑动,动画,停止动画)
106 0
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
190 0
|
XML 图形学 数据格式
Animation组合动画踩坑-实现循环播放动画,可控制次数
Animation组合动画踩坑-实现循环播放动画,可控制次数
|
存储 图形学
|
JavaScript 开发者
动画-小球动画 flag 标识符的作用分析|学习笔记
快速学习动画-小球动画 flag 标识符的作用分析
180 0
动画-小球动画 flag 标识符的作用分析|学习笔记
|
JavaScript 开发者
动画-小球动画flag标识符的作用分析|学习笔记
快速学习动画-小球动画flag标识符的作用分析
136 0
动画-小球动画flag标识符的作用分析|学习笔记
多个动画次序播放
多个动画次序播放
115 0