OpenHarmony动效开发指导（一）：添加属性动画

1 动画概述

在OpenHarmony提供的文档中，动画主要分为属性动画及转场动画。其定义分别为：

属性动画：

通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口animateTo和animation驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。

转场动画：

转场动画是指对将要出现或消失的组件做动画，对始终出现的组件做动画应使用属性动画。转场动画主要为了让开发者从繁重的消失节点管理中解放出来，如果用属性动画做组件转场，开发者需要在动画结束回调中删除组件节点。同时，由于动画结束前已经删除的组件节点可能会重新出现，还需要在结束回调中增加对节点状态的判断。

可以看出，在涉及组件的出现消失时如果要添加动画，则最好使用转场动画，其余的不涉及组件的出现消失的场景均使用属性动画。本文先对属性动画的实现进行讲解。

2 属性动画的实现

以Hello World为例，实现点击单词位置后，Hello World大小缩小为0.5倍，再次点击后恢复。实现代码为：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State scaleValue: number = 1.0;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .scale({ x: this.scaleValue, y: this.scaleValue })
          .onClick(() => {
            animateTo({
              duration: 500,
              curve: Curve.Linear
            }, () => {
              this.scaleValue = this.scaleValue === 1.0 ? 0.5 : 1.0;
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果为：

在这笔修改中，先是添加了一个@State变量scaleValue，@State的作用可以参考文档：[State作用](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdocs%2Fdocumentation%2Fdoc-guides-V3%2Farkts-state-0000001474017162-V3 "https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-state-0000001474017162-V3")

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。

在做属性动画时，由于UI需要每帧都跟随动画变更，因此需要将对应的属性绑定一个@State变量。本例中是将Hello World的组件的缩放值scale添加了属性动画，并将缩放值的大小绑定在scaleValue变量上。

具体代码中就是第5行和第13行的修改。

第14行的修改是添加点击事件回调，在Hello World文本被点击时，会执行这个回调函数。

onClick回调中的animateTo即是加动画的接口，对scaleValue添加一个动画，对应的属性会跟随这个动画值进行改变。

3 animateTo

animateTo的详细解析可以参考文档：[animateTo参考文档](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdocs%2Fdocumentation%2Fdoc-references-V3%2Fts-explicit-animation-0000001478341181-V3 "https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-explicit-animation-0000001478341181-V3")

除了代码中设置的duration动画时长和curve动画曲线以外，还可以参考上述文档添加delay时延和重复性动画。

animateTo的第一个参数即为动画参数，包括动画的时长曲线等参数，第二个参数为指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

4 其余的属性动画

除了示例中的缩放值scale这一属性外，还有许多支持动画的属性，具体可以参考：[通用属性](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.harmonyos.com%2Fcn%2Fdocs%2Fdocumentation%2Fdoc-references-V3%2Fts-universal-attributes-size-0000001428061700-V3 "https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-universal-attributes-size-0000001428061700-V3")目录下的各属性值。

例如，下面的代码添加了组件的缩放、旋转、位移、透明度等属性动画。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State scaleValue: number = 1.0;
  @State translateValue: number = 0;
  @State rotateAngle: number = 0;
  @State alphaValue: number = 1.0;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .scale({ x: this.scaleValue, y: this.scaleValue })
          .translate({ y: this.translateValue })
          .rotate({ z: 1, angle: this.rotateAngle })
          .opacity(this.alphaValue)
          .onClick(() => {
            animateTo({
              duration: 500,
              curve: Curve.Linear
            }, () => {
              this.scaleValue = this.scaleValue === 1.0 ? 0.5 : 1.0;
              this.translateValue = this.translateValue === 0 ? -30 : 0;
              this.rotateAngle = this.rotateAngle === 0 ? 90 : 0;
              this.alphaValue = this.alphaValue === 1.0 ? 0.5 : 1.0;
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果为：