简述

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

常用于如下场景中：

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

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

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

创建

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

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

参数说明

Curve枚举值

设置

设置播放速度

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

设置动画播放模式

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

PlayMode枚举值

设置延时时间

通过设置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等