【HarmonyOS】ArkUI - 动画

利用属性动画、显示动画、组件转场动画实现组件动画效果。

一、属性动画

属性动画是通过设置组件的 animation 属性来给组件添加动画，当组件的 width、height、Opacity、backgroundColor、scale、rotate、translate 等属性变更时，可以实现渐变过渡效果。

以 Image 组件为例，给它添加动画，其实就是给它添加 animation 的属性：

Image($r('app.media.app_icon'))
  .position({
   
   
    x: 10, // x轴坐标
    y: 10  // y轴坐标
  })
  .rotate({
   
   
    angle: 0,       // 旋转角度
    centerX: '50%', // 旋转中心横坐标
    centerY: '50%'  // 旋转中心纵坐标
  })
  .animation({
   
   
    duration: 1000,
    curve: Curve.EaseInOut
  })

这时，ArkUI 就能帮我们监控组件的样式变化，我们只需要在与用户互动的事件当中去修改组件的样式，ArkUI 一旦发现组件的样式变化，就会自动填充起始样式和结束样式之间的每一帧画面，从而实现样式变化的渐变过渡效果。所以，一个动画就出来了。

注意：

1. animation 属性一定要放在需要有动画属性的样式之后。就像上面的实例代码，animation 要放在 position 和 rotate 之后。如果把 animation 放在前面，然后再写 position 和 rotate，那么这俩就不会有任何的变化。

2. animation 属性不是对所有样式都有效。

animation 可以传递的动画参数：

示例代码：

@Entry
@Component
struct Index {
   
   
  @State textX: number = 10
  @State textY: number =