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

本文详细介绍了Android应用中的三种关键动画类型:属性动画(通过组件属性变化实现)、显式动画(通过全局函数animateTo控制)和组件转场动画(插入/移除时的过渡)。重点讲解了各动画的参数和使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

动画

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

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

属性动画

是通过设置组件的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类似

以上是动画相关内容😊

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

碰磕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值