鸿蒙~ArkUI 动画 布局更新动画

一 布局更新动画

是ArkUI提供的最基础和常用的动画功能。在布局属性（如尺寸属性、位置属性）发生变化时，可以通过属性动画或显式动画，按照动画参数过渡到新的布局参数状态

• 主要针对组件的属性

1、显示动画、属性动画 参数 :

• AnimateParam

  
  微信图片_20231221221059.png

• PlayMode

名称              描述
Normal            动画按正常播放。
Reverse           动画反向播放。
Alternate         动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
AlternateReverse  动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

• 曲线curve枚举值
  Bezier曲线 官网 （https://cubic-bezier.com）

名称                          描述
Linear                       表示动画从头到尾的速度都是相同的。
Ease                         表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
EaseIn                       表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
EaseOut                      表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
EaseInOut                    表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
FastOutSlowIn                标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
LinearOutSlowIn              减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
FastOutLinearIn              加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
ExtremeDeceleration          急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
Sharp                        锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
Rhythm                       节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
Smooth                       平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
Friction                     阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

2、显示动画(animateTo)

animateTo(value: AnimateParam, event: () => void): void

demo

@Entry
@Component
struct LayoutChange {
  // 用于控制Column的alignItems属性
  @State itemAlign: HorizontalAlign = HorizontalAlign.Start;
  allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
  alignIndex: number = 0;

  build() {
    Column() {
      Column({ space: 10 }) {
        Button("1").width(100).height(50)
        Button("2").width(100).height(50)
        Button("3").width(100).height(50)
      }
      .margin(20)
      .alignItems(this.itemAlign)
      .borderWidth(2)
      .width("90%")
      .height(200)

      Button("click").onClick(() => {
        // 动画时长为1000ms，曲线为EaseInOut
        animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
          this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;
          // 在闭包函数中修改this.itemAlign参数，使Column容器内部孩子的布局方式变化，使用动画过渡到新位置
          this.itemAlign = this.allAlign[this.alignIndex];
        });
      })
    }
    .width("100%")
    .height("100%")
  }
}

3、属性动画(animation)

animation(value: AnimateParam)

使用属性动画产生布局更新动画

@Entry
@Component
struct LayoutChange2 {
  @State myWidth: number = 100;
  @State myHeight: number = 50;
  @State flag: boolean = false;
  @State myColor: Color = Color.Blue;

  build() {
    Column({ space: 10 }) {
      Button("text")
        .type(ButtonType.Normal)
        .width(this.myWidth)
        .height(this.myHeight)
        // animation只对其上面的type、width、height属性生效，时长为1000ms，曲线为Ease
        .animation({ duration: 1000, curve: Curve.Ease })
        // animation对下面的backgroundColor、margin属性不生效
        .backgroundColor(this.myColor)
        .margin(20)
        

      Button("area: click me")
        .fontSize(12)
        .onClick(() => {
          // 改变属性值，配置了属性动画的属性会进行动画过渡
          if (this.flag) {
            this.myWidth = 100;
            this.myHeight = 50;
            this.myColor = Color.Blue;
          } else {
            this.myWidth = 200;
            this.myHeight = 100;
            this.myColor = Color.Pink;
          }
          this.flag = !this.flag;
        })
    }
  }
}