HarmonyOS4.0开发应用(六)【动画】

动画

页面要做的精美炫酷，动画不可少！ 分为一下三种进行讲解使用

• 属性动画
• 显式动画
• 组件转场动画

属性动画

是通过设置组件的animation属性来给组件添加动画，当组件的width、height、0pacity backgroundColor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。

Text('我是动画')
	.position({
		x: 10,
		y: 0
	})
	.rotate({
		angle: 0,//旋转角度
		centerX: '50%',//旋转中心横坐标
		centerY: '50%',//旋转中心纵坐标
	})
	.animation({
		duration: 1000,
		curve: Curve.EaseInOut //动画曲线
	})

名称	描述
duration	设置动画时长,默认值1000 单位：ms
tempo	动画播放速度 数字越大越快 默认值1
curve	设置动画曲线,默认值Curve.EaseInOut 平滑开始和结束
delay	设置动画延迟执行时长,默认值0 单位：ms
iterations	设置播放次数,默认值1 设置-1则无限循环
playMode	设置动画播放模式,默认播放完重头播放 默认值：PlayMode.Normal
onFinish	动画完成时触发

显式动画

显式动画是通过全局animateTo来修改组件属性，实现属性变化时的渐变过渡效果

Text('我是动画')
	.position({
		x: 10,
		y: 0
	})
	.rotate({
		angle: 0,//旋转角度
		centerX: '50%',//旋转中心横坐标
		centerY: '50%',//旋转中心纵坐标
	})
animateTo(
	{duration:1000},
	()=>{
		//修改组件属性关联的状态变量
	}
)

组件转场动画

组件转场动画是在组件插入或移除时的过渡动画，通过组件的transition属性来配置。

if(this.isShow){
	Text('动画')
		.transition({
			opcity:0,
			rotate: {angle: -360},
			scale:{x:0,y:0}
		})
}


//显式调用触发动画
animateTo(
	{duration: 1000},
	()=>{
		this.isShow=false
	}
}

名称	描述
type	类型，默认包括组件新增和删除。默认是ALL
opacity	不透明度，为插入时起点和删除时终点的值，默认值:1，取值范围:[0，1]
translate	平移效果，为插入时起点和删除时终点的值，-x:横向的平移距离。-y:纵向的平移距离。-z:竖向的平移距离。
scale	缩放效果，为插入时起点和删除时终点的值。-x:横向放大倍数(或缩小比例) -y:纵向放大倍数(或缩小比例) -z:当前为二维显示，该参数无效。centerx、centery指缩放中心点，centerX和centerY默认值是"50%"中心点为0时，默认的是组件的左上角。
rotate	旋转效果:angle是旋转角度，其它参数与scale类似

以上是动画相关内容😊