鸿蒙开发：了解显式动画animateTo

前言

运行环境：基于HarmonyOs NEXT

DevEco Studio：Build Version: 5.0.3.900

API：12

modelVersion：5.0.0

上篇文章，我们简单了解了属性动画，知道了属性动画有两种实现方式，一种是animation，另一种是animateTo，上篇的案例基本上也都是使用animation来实现的，其实在案例中，大家也都发现了，animation是组件的通用属性，也就是说是和组件进行绑定的，如果想让多个组件进行动画播放，那么就需要绑定多个组件。有没有一种方式，执行起来，可以适用于多个可动画属性配置相同动画参数的动画呢，答案是必须有的，这就是animateTo。

举一个很简单的案例，让两个组件，同时在X轴方向，平移100，用时1秒。

@Entry
@Component
struct Index {
  @State translateX: number = 0
  build() {
    RelativeContainer() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })
        .margin({ top: 100 })
        .id("view1")
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      Text("2")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "view1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.translateX = 100
          })
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

动画效果：

从上边的案例中我们可以看到，animateTo是一个全局实现属性动画的方式，它可以应用于多个组件之间，但是呢使用它，有两个需要注意的点，那就是不推荐在aboutToAppear、aboutToDisappear中调用动画；在aboutToAppear中，是因为自定义组件内的build还未执行，内部组件还未创建，动画时机过早，动画属性没有初值无法对组件产生动画；aboutToDisappear原因是，组件即将销毁，不能在aboutToDisappear里面做动画。

相关参数

通过源码，我们看到有两个参数，第一个参数是AnimateParam，用于控制动画执行的相关属性，比如延时，时间，速度等等，第二个参数是一个闭包回调函数，用于改变动画属性。

declare function animateTo(value: AnimateParam, event: () => void): void;

AnimateParam参数

以上的每个参数，都可能在特定的情况下进行运用。

duration参数，不多说了，就是执行动画的总体时间，这个也是实际属性动画中最常见的一个属性；像tempo，delay，iterations，playMode，onFinish都是毕竟常见而且简单的属性，就不过多赘述了，我们重点概述下剩下的几个参数。

curve，动画执行的曲线，走的是贝塞尔曲线形式，可设置的类型比较多，默认值是Curve.EaseInOut，也就是动画以低速开始和结束，除此之外，还有Linear，表示动画从头到尾的速度都是相同的；Ease：表示动画以低速开始，然后加快，在结束前变慢；EaseIn：表示动画以低速开始；EaseOut：表示动画以低速结束；FastOutSlowIn：标准曲线，LinearOutSlowIn：减速曲线；FastOutLinearIn：加速曲线；ExtremeDeceleration：急缓曲线；Sharp：锐利曲线；Rhythm：节奏曲线；Smooth：平滑曲线；Friction：阻尼曲线。

playMode，可以设置动画播放模式，目前提供的有四种播放模式，默认是Normal也就是正向播放，Reverse是反向播放，Alternate毕竟好玩，可以让动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放；AlternateReverse是和Alternate相反的，动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

在Api11之后的版本，又增加了两个属性，分别是finishCallbackType和expectedFrameRateRange，前者可以定义动画结束时回调的类型，后者可以设置动画执行的帧率，帧率包括，最大，最小和最优，可以根据需求进行设置。

相关总结

在实际的开发中，应该遵循规范，正确的使用属性动画animateTo，切莫在轮询中使用，否则就会造成本不属当前的动画进行执行，造成UI错误，还有一点需要注意，那就是直接使用animateTo可能导致实例不明确的问题，建议使用getUIContext获取UIContext实例，并使用animateTo调用绑定实例的animateTo。