5.鸿蒙-属性动画相关概念汇总

属性动画的使用

1.属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。常用于如下场景中：

  一、页面布局发生变化。例如添加、删除部分组件元素。
  二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。
  三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。
  简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变
  为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。

  属性动画的使用方式也非常简单，只需要给组件（包括基础组件和容器组件）添加animation属性，并设置好参数，如下代码所示：
  Image($r('app.media.image1'))
     .animation({
        duration: 1000,
        tempo: 1.0,
        delay: 0,
        curve: Curve.Linear,
        playMode: PlayMode.Normal,
        iterations: 1
     })
2 创建属性动画页面
    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等
duration    number      1000        动画时长，单位为毫秒，默认时长为1000毫秒。
tempo       number      1.0         动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。
curve       Curve       Curve.Linear动画变化曲线，默认曲线为线性。
delay       number      0           延时播放时间，单位为毫秒，默认不延时播放。
iterations  number      1           播放次数，默认一次，设置为-1时表示无限次播放。
playMode    PlayMode    PlayMode.Normal 设置动画播放模式，默认播放完成后重头开始播放。
onFinish    function    -           动画播放结束时回调该函数。
    其中变化曲线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)。

    播放模式playMode枚举值为：
    Normal  动画按正常播放。

    Reverse 动画反向播放。

    Alternate   动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

    AlternateReverse    动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

 onFinish回调函数的使用
 参数onFinish与参数iterations有关。当参数iterations播放结束时，会调用onFinish函数来进行后续的业务处理。例如提示动画播放结束。
 Image(iconItem.imgRes)
   .width(this.iconWidth)
   .position({ x: iconItem.posX })
   .objectFit(ImageFit.Contain)
   .animation({
     duration: 2000,
     tempo: 3.0,
     delay: iconItem.delay,
     curve: Curve.Linear,
     playMode: PlayMode.Normal,
     iterations: 1,
     onFinish: () => {
       prompt.showToast({ message:"动画播放结束！！！" })
     }
   })

   @Consume监听其值的变化