大家上午好，今天来聊一聊仓颉开发语言中的动画开发。
仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。
显示动画
显示动画是幽蓝君比较习惯使用的方式，它主要依赖 animateTo 方法来实现。
首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置 angle 的话是无效的，必须同时设置 z 和 angle：
@Statevar angle:Float32 = 0.0Column{ Image(@r(app.media.loading)) .width(70) .height(70) .rotate(z:this.angle,angle:this.angle)}.width(120).height(120).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(Color(0, 0, 0, alpha: 0.7)).borderRadius(10)
复制代码
然后在添加一个按钮，在按钮的点击事件里进行动画开发：
Button('开始动画').width(100).onClick({evet => animateTo( AnimateParam( duration: 2000, curve: Curve.Linear, delay: 0, iterations: -1, playMode: PlayMode.Normal, onFinish: {=> angle = 0.0 } ), { => angle = 360.0 }) })
复制代码
上面代码中，duration 表示动画时长，curve 表示动画曲线，delay 表示延时，iterations 表示循环次数，-1 表示无限循环，playMode 表示动画模式，这些属性在属性动画中也同样适用。
属性动画
属性动画的各个属性个显示动画都是一样的，只是写法上有区别，给大家演示一下同样的动画使用属性动画的写法：
let animate = AnimateParam( duration: 2000, curve:Curve.Linear, delay: 0, iterations: -1, playMode: PlayMode.Normal, onFinish: { => })Column{ Image(@r(app.media.loading)) .animationStart(animate) .width(70) .height(70) .rotate(z:this.angle,angle:this.angle) .animationEnd()}.width(120).height(120).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(Color(0, 0, 0, alpha: 0.7)).borderRadius(10)Button('开始').onClick({eve => this.angle = 360.0 })
复制代码
以上就是关于仓颉语言属性动画和显示动画的相关内容，感谢阅读。##HarmonyOS 语言 ##仓颉 ##购物 #
评论