1 动画概述

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

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

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

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

2 属性动画的实现

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

ts 复制代码

@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作用]

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

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

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

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

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

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

3 animateTo

animateTo的详细解析可以参考文档：[animateTo参考文档]

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

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

4 其余的属性动画

除了示例中的缩放值scale这一属性外，还有许多支持动画的属性，具体可以参考：[通用属性]目录下的各属性值。

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