【HarmonyOS】【应用开发】动画-属性动画与显式动画

Harmony_Launch

已于 2024-01-07 19:59:17 修改

阅读量2.5k

点赞数 21

分类专栏： HarmonyOS应用文章标签： harmonyos 华为

于 2024-01-07 17:58:21 首次发布

本文链接：https://blog.youkuaiyun.com/Mrwxxxx/article/details/135442495

版权

本文介绍了HarmonyOS中的属性动画和显式动画。属性动画适用于组件属性变化的平滑过渡，包括width、height、backgroundColor等属性的变化。显式动画则是通过全局animateTo接口实现状态变化的过渡效果。文章通过实例详细讲解了如何使用这两种动画，包括按钮大小变化、颜色调整、旋转及动画结束时的回调操作。

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

文章目录

一、属性动画

（一）、定义

官网对于属性动画的定义如下：

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等

个人理解：属性动画针对的是同一个组件的属性变化情况，如在同一个页面中触发了组件的属性变化，这个变化需要以过渡的方式体现，这就需要属性动画来承接这个过渡过程，不然变化就会显得十分突兀与生硬。因此，只要组件的指定属性有变化，那么这个变化就会通过属性动画来体现。

（二）、使用方式

使用属性动画，通过animation属性来为每个组件定义该组件对应的属性动画，如下所示：

animation(
	value: {
   
		duration?: number, 
		tempo?: number, 
		curve?: string | Curve | ICurve, 
		delay?:number, 
		iterations: number, 
		playMode?: PlayMode, 
		onFinish?: () => void
	}
)

其中的每个参数都会改变属性动画的展现情况，

duration：设置动画时长，默认值为1000ms，如果设置了浮点值则向下取整；
tempo：动画播放速度，默认值为1，数值越大，动画播放速度越快。值为0时，表示不存在动画；
curve：设置动画的播放曲线，作为小白我粗略地理解为动画不同阶段的播放快慢，可以通过Curve来指定动画曲线，如动画快速进入慢速退出，动画快速进入快速退出；
delay：设置动画延迟执行的时长，默认值为0；
iterations：设置播放次数，默认为1，设置为-1时表示无限次播放；
playMode：设置动画的播放模式，如动画正常播放，反向播放，也可以在奇偶次数进行不同的正反向播放；
onFinish：回调函数，在动画播放完成时出发。当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调；

（三）、使用案例

1、点击按钮变大（width/height）

如果没有加属性动画，那么在点击按钮时就会很生硬地变动，如下所示：

Button('change size')
        .onClick(() => {
   
          if (this.flag) {
   
            this.widthSize = 150
            this.heightSize = 60
          } else {
   
            this.widthSize = 250
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)

使用属性动画后，点击按钮后按钮变大产生了动画效果，更加顺滑：

Button('change size')
        .onClick(() => {
   
          if (this.flag) {
   
            this.widthSize = 150
            this.heightSize = 60
          } else {
   
            this.widthSize = 250
            this.heightSize = 100
          }
          this

最低0.47元/天解锁文章