鸿蒙(HarmonyOS)应用开发——属性动画

简述

属性动画是组件的通用属性发生变化时而产生的属性渐变效果；其原理是当组件的通用属性发生变化时，组件的状态由初始状态逐渐变为结束状态的过程中会创建出多个连续的中间状态，逐帧播放后就会实现一个动画。

常用于如下场景中：

• 一、页面布局发生变化。例如添加、删除部分组件元素。

• 二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。

• 三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。

创建

给组件（Image、Button、column等）添加 animation 属性，被设置duration、tempo、curve等参数

.animation({   
      duration: 1000,    
      tempo: 1.0,    
      delay: 0,    
      curve: Curve.Linear,    
      playMode: PlayMode.Normal,    
      iterations: 1  
   })

参数说明

参数名	默认值	说明
duration	1000	动画时长，单位为毫秒
tempo	1.0	动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果
curve	Curve.Linear	动画变化曲线，默认曲线为线性
delay	0	延时播放时间，单位为毫秒
iterations	1	播放次数，默认一次，设置为-1时表示无限次播放
playMode	PlayMode.Normal	设置动画播放模式，默认播放完成后重头开始播放。
onFinish		动画播放结束时回调该函数。

Curve枚举值

枚举值	说明
Linear	表示动画从头到尾的速度都是相同的
Ease	表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn	表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut	表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)
EaseInOut	表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)
FastOutSlowIn	标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。。
LinearOutSlowIn	减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn	加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration	急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp	锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。。
Rhythm	节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth	平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction	阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

设置

设置播放速度

通过设置tempo 属性控制播放速度

设置动画播放模式

通过设置playMode属性，设置动画播放模式

PlayMode枚举值

枚举值	说明
Normal	动画按正常播放
Reverse	动画反向播放。
Alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
AlternateReverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放

设置延时时间

通过设置delay属性，设置延时时间

onFinish回调

onFinish函数表示播放完成时调用，当iterations =-1 时，这个函数不会执行；这是因为iterations=-1 表示无限次播放

注意点

1、animation属性作用域。animation自身也是组件的一个属性，其作用域为animation之前。即产生属性动画的属性须在animation之前声明，其后声明的将不会产生属性动画。以示例中的五个图标动画为例，我们期望产生动画的属性为Image组件的width属性，故该属性width需在animation属性之前声明。如果将该属性width在animation之后声明，则不会产生动画效果。

2、产生属性动画的属性变化时需触发UI状态更新。在本示例中，产生动画的属性width，其值是通过变量iconWidth从30变为100，故该变量iconWidth的改变需触发UI状态更新。

3、产生属性动画的属性本身需满足一定的要求，并非任何属性都可以产生属性动画。目前支持的属性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等