详解鸿蒙Next仓颉开发语言中的动画
原创
详解鸿蒙Next仓颉开发语言中的动画
原创
幽蓝计划
发布于 2025-06-08 14:26:47
发布于 2025-06-08 14:26:47
代码可运行
运行总次数：0
代码可运行
大家上午好，今天来聊一聊仓颉开发语言中的动画开发。
仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。
图片
显示动画
显示动画是幽蓝君比较习惯使用的方式，它主要依赖animateTo方法来实现。
首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置angle的话是无效的，必须同时设置z和angle：
@State
var angle:Float32 = 0.0
Column{
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语言##仓颉##购物#
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
