鸿蒙开发之动画
2023-12-14 12:08:38
一、概述
鸿蒙开发中动画按照基础能力分,可以分成三种:属性动画、显示动画、转场动画。
使用属性动画产生布局更新动画 显式动画(animateTo)和属性动画(animation)是ArkUI提供的最基础和常用的动画功能。在布局属性(如尺寸属性、位置属性)发生变化时,可以通过属性动画或显式动画,按照动画参数过渡到新的布局参数状态。
二、缩放动画
animateTo({
duration:2000, //动画时长
curve:Curve.Linear, //动画匀速
iterations:3, //动画次数
delay:1000, //延时时间执行
playMode:PlayMode.Alternate, //来回交替
onFinish: () => { //动画完成的回调
this.message = '动画完成'
}
},() => {
//想要执行的动画效果
this.textWidth = 360;
this.textHeight = 120
})
我们使用了动画来设置Text的宽度和高度属性,就达到了这个效果。
三、平移动画
同理,我们可以通过设置Column的交叉轴的方向来达到平移动画。
//定义一个变量来改变组件的排列方式
@State alignParam: HorizontalAlign = HorizontalAlign.Start
Column({space:20}) {
Text(this.message)
.width(this.textWidth)
.height(this.textHeight)
.backgroundColor(Color.Blue)
.fontSize(20)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({top:30})
.onClick(() => {
animateTo({
duration:2000, //动画时长
curve:Curve.Linear, //动画匀速
iterations:3, //动画次数
delay:1000, //延时时间执行
playMode:PlayMode.Alternate, //来回交替
onFinish: () => { //动画完成的回调
this.message = '动画完成'
}
},() => {
//利用三目运算改变排列方式
this.alignParam = this.alignParam === HorizontalAlign.End ? HorizontalAlign.Start : HorizontalAlign.End
})
})
}
//设置交叉轴上的排列方式
.alignItems(this.alignParam)
.width('100%')
.height('100%')
四、翻转动画
旋转动画需要依赖组件的rotate属性,这个属性可以设置旋转的坐标系是x轴、y轴、z轴。并且需要一个必须参数angle角度。
//设置一个变量作为旋转角度
@State angle: number = 0
Column({space:20}) {
Text(this.message)
.width(this.textWidth)
.height(this.textHeight)
.backgroundColor(Color.Blue)
.fontSize(20)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({top:30})
.rotate({ //旋转属性
z:1,
angle:this.angle
})
.onClick(() => {
animateTo({
duration:2000, //动画时长
curve:Curve.Linear, //动画匀速
iterations:3, //动画次数
delay:1000, //延时时间执行
playMode:PlayMode.Alternate, //来回交替
onFinish: () => { //动画完成的回调
this.message = '动画完成'
}
},() => {
//设置旋转的角度是360度
this.angle = 360
})
})
}
.alignItems(this.alignParam)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
五、属性动画
属性动画是不需要单独调用animateTo方法的,只需要在组件通过点语法调用animation属性。
@State textWidth: number = 120
@State textHeight: number = 40
Column({space:20}) {
Text(this.message)
.width(this.textWidth)
.height(this.textHeight)
//直接调用属性即可,内部也可以传递动画的属性
.animation({})
.backgroundColor(Color.Blue)
.fontSize(20)
.fontColor(Color.White)
.fontWeight(FontWeight.Bold)
.margin({top:30})
.onClick(() => {
this.textWidth = 360;
this.textHeight = 120
})
}
.alignItems(this.alignParam)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
注意:animation()属性调用要在width、height之后,不然不会生效。
文章来源:https://blog.csdn.net/Lu_Ca/article/details/134988768
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!