详解鸿蒙Next仓颉开发语言中的动画

大家上午好，今天来聊一聊仓颉开发语言中的动画开发。
仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。

显示动画
显示动画是幽蓝君比较习惯使用的方式，它主要依赖animateTo方法来实现。
首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置angle的话是无效的，必须同时设置z和angle：

1. @State
2. var angle:Float32 = 0.0
3. Column{
4.     Image(@r(app.media.loading))
5.     .width(70)
6.     .height(70)
7.     .rotate(z:this.angle,angle:this.angle)
8. }
9. .width(120)
10. .height(120)
11. .alignItems(HorizontalAlign.Center)
12. .justifyContent(FlexAlign.Center)
13. .backgroundColor(Color(0, 0, 0, alpha: 0.7))
14. .borderRadius(10)

复制代码

然后在添加一个按钮，在按钮的点击事件里进行动画开发：

1. Button('开始动画')
2. .width(100)
3. .onClick({evet =>
4.     animateTo(
5.             AnimateParam(
6.                 duration: 2000,
7.                 curve: Curve.Linear,
8.                 delay: 0,
9.                 iterations: -1,
10.                 playMode: PlayMode.Normal,
11.                 onFinish: {=>
12.                     angle = 0.0
13.                     }
14.                 ),
15.                 {   =>
16.                     angle = 360.0
17.                     })
18.     })

复制代码

上面代码中，duration表示动画时长，curve表示动画曲线，delay表示延时，iterations表示循环次数，-1表示无限循环，playMode表示动画模式，这些属性在属性动画中也同样适用。
属性动画
属性动画的各个属性个显示动画都是一样的，只是写法上有区别，给大家演示一下同样的动画使用属性动画的写法：

1. let animate = AnimateParam(
2.     duration: 2000,
3.     curve:Curve.Linear,
4.     delay: 0,
5.     iterations: -1,
6.     playMode: PlayMode.Normal,
7.     onFinish: { => })
8. Column{
9.     Image(@r(app.media.loading))
10.      .animationStart(animate)
11.     .width(70)
12.     .height(70)
13.     .rotate(z:this.angle,angle:this.angle)
14.     .animationEnd()
15. }
16. .width(120)
17. .height(120)
18. .alignItems(HorizontalAlign.Center)
19. .justifyContent(FlexAlign.Center)
20. .backgroundColor(Color(0, 0, 0, alpha: 0.7))
21. .borderRadius(10)
22. Button('开始')
23. .onClick({eve =>
24.     this.angle = 360.0
25.     })

复制代码

以上就是关于仓颉语言属性动画和显示动画的相关内容，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！