鸿蒙 HarmonyOs 动画效果 快速入门

一、理论

1.1 animation属性

名称	参数类型	必填	描述
duration	number	否	设置动画时长，默认值：1000，单位：毫秒
tempo	number	否	动画播放速度。数值越大，速度越快，默认为1
curve	string | Curve	否	设置动画曲线。 默认值：Curve.EaseInOut,平滑开始和结束
delay	number	否	设置动画延迟执行的时长。默认值为0，毫秒
iterations	number	否	设置播放次数。 默认值：1，取值范围：[-1, +∞] 设置为 -1 表示无限次播放。
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal
onFinish	()=>void	否	状态回调，动画播放完成时触发

1.2 组件转场效果

参数名	参数类型	必填	描述
type	TransitionType	否	类型，默认组件爱你新增和删除，默认为ALL
opacity	number	否	不透明度，为插入时起点和删除时终点的值。默认值为1，取值范围为[0,1]
translate	{         x?:number | string,         y?:number | string,         z?:number | string }	否	平移效果，为插入时起点和删除时终点的值。 -x:横向的平移距离。 -y:纵向的平移距离。 -z:竖向的平移距离。
scale	{         x?:number,         y?:number,         z?:number,         centerX?:number | string,         centerY?:number | string }	否	缩放效果，为插入时起点和删除时终点的值。 -x:横向的缩放倍数 -y:纵向的缩放倍数 -z:为当前的二维显示，该参数无效 -centerX：centerY指缩放中心点，centerX和centerY默认值是"50%" -中心点为0时，默认是组件的左上角
rotate	{         x?:number,         y?:number,         z?:number,         angle:number | string,         centerX?:number | string,         centerY?:number | string }	否	旋转效果： angle是旋转角度

二、实操

2.1 示例：旋转图片

示例代码：

@Entry
@Component
struct Index {@State angle:number = 0build(){Column(){//显示图片Image($r('app.media.one')).width(120).rotate({angle:this.angle,centerX:'50%',centerY:'50%'}).animation({duration:1000,onFinish:()=>{console.log('结束时：'+this.angle)}})Button('动画开始').onClick(()=>{this.angle += 360})}.width('100%').height('100%')}
}

2.2 示例：平移、旋转、缩放

其中scale的值为缩放比例，所以1为初始值，2则表示原有的1倍

其中rotate的值为1则表示以该轴旋转，0则不以该轴旋转

示例效果：

示例代码：

@Entry
@Component
struct Index {@State angle:number = 0@State rotateX:number = 0@State rotateY:number = 0@State rotateZ:number = 0@State translateX:number = 0@State translateY:number = 0@State scaleX:number =  1@State scaleY:number =  1build(){Column(){//显示图片Image($r('app.media.one')).width(120).rotate({angle:this.angle,x:this.rotateX,y:this.rotateY,z:this.rotateZ,centerX:'50%',centerY: '50%',}).animation({duration:1000,onFinish:()=>{console.log('结束时：'+this.angle)}}).translate({x:this.translateX,y:this.translateY}).scale({x:this.scaleX,y:this.scaleY,centerX:'50%',centerY: '50%',})Blank()Row(){Column(){Image($r('app.media.ic_public_arrow_up_0')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateY -= 50})Row(){Image($r('app.media.ic_public_arrow_left')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateX -= 50})Image($r('app.media.ic_public_arrow_right')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateX += 50})}.width(130).justifyContent(FlexAlign.SpaceBetween)Image($r('app.media.ic_public_arrow_down_0')).width(40).backgroundColor(Color.White).borderRadius(20).onClick(()=>{this.translateY += 50})}.width(200)Column({space:20}){Button('旋转一圈动画开始').onClick(()=>{this.rotateZ = 1this.angle += 360})Button('放大一倍').onClick(()=>{this.scaleX *= 2this.scaleY *= 2})Button('缩小一倍').onClick(()=>{this.scaleX /= 2this.scaleY /= 2})}.padding(10)}.width('100%').backgroundColor(Color.Gray)}.width('100%').height('100%')}
}

2.3 示例：简单摇骰子效果

示例效果：

示例代码：

@Entry
@Component
struct Index {@State dice:Resource[] = [$r('app.media.one'),$r('app.media.two'),$r('app.media.three'),$r('app.media.four'),$r('app.media.five'),$r('app.media.six')]@State currentDice:Resource = this.dice[0]@State angle:number = 0@State rotateX:number = 0@State rotateY:number = 1@State rotateZ:number = 0@State opacityNumber:number = 1@State runState:boolean = falsebuild(){Column(){//显示图片Image(this.currentDice).width(120).rotate({angle:this.angle,x:this.rotateX,y:this.rotateY,z:this.rotateZ,centerX:'50%',centerY: '50%',}).animation({duration:1000,curve:Curve.EaseInOut,onFinish:()=>{this.opacityNumber = 1console.log('结束时：'+this.angle)},}).opacity(this.opacityNumber)Button('摇骰子').width(200).onClick(()=>{this.opacityNumber = 0.8this.angle += 360setTimeout(()=>{this.currentDice = this.dice[Math.floor(Math.random() * this.dice.length)];},1000)})}.width('100%').height('100%')}
}