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

以上是动画相关内容😊

相关推荐
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码5 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html