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作用]
@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。
<font color="Red">在做属性动画时，由于UI需要每帧都跟随动画变更，因此需要将对应的属性绑定一个@State变量。本例中是将Hello World的组件的缩放值scale添加了属性动画，并将缩放值的大小绑定在scaleValue变量上。</font>
具体代码中就是第5行和第13行的修改。
第14行的修改是添加点击事件回调，在Hello World文本被点击时，会执行这个回调函数。
onClick回调中的animateTo即是加动画的接口，对scaleValue添加一个动画，对应的属性会跟随这个动画值进行改变。
3 animateTo
animateTo的详细解析可以参考文档：[animateTo参考文档]
除了代码中设置的duration动画时长和curve动画曲线以外，还可以参考上述文档添加delay时延和重复性动画。
animateTo的第一个参数即为动画参数，包括动画的时长曲线等参数，第二个参数为指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。
4 其余的属性动画
除了示例中的缩放值scale这一属性外，还有许多支持动画的属性，具体可以参考：[通用属性]目录下的各属性值。
例如，下面的代码添加了组件的缩放、旋转、位移、透明度等属性动画。
@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%')
}
}
效果为：
