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

动画

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

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

属性动画

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

c 复制代码
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来修改组件属性,实现属性变化时的渐变过渡效果

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

组件转场动画

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

c 复制代码
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类似

以上是动画相关内容😊

相关推荐
mCell15 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip15 小时前
Node.js 子进程:child_process
前端·javascript
excel18 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel19 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript