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类似

以上是动画相关内容😊

相关推荐
凌辰揽月42 分钟前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端2 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴3 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
前端工作日常3 小时前
我学习到的“伪勤奋”
强化学习
鱼樱前端3 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧3 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er4 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶4 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李4 小时前
前端开发中的输出问题
开发语言·前端·javascript