鸿蒙 - arkTs：属性动画，显式动画，组件转场动画_鸿蒙开发中属性对话 转场动画 显示动画

属性动画：

属性动画是通过设置组件的animation属性来给组件添加动画；

代码示例：

@Entry
@Component
struct Index {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State flag: boolean = true
 
  build() {
    Column() {
      Button('开始动画')
        .onClick(() => {
          if (this.flag) {
            this.widthSize = 150
            this.heightSize = 60
          } else {
            this.widthSize = 250
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .margin(30)
        .width(this.widthSize)
        .height(this.heightSize)
        .animation({
          duration: 2000,
          curve: Curve.EaseOut,
          iterations: 3,
          playMode: PlayMode.Normal
        })
    }
      .width('100%')
      .margin({ top: 20 })
  }
}

---

显式动画：

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

代码示例：

@Entry
@Component
struct Index {
  @State widthSize: number = 250
  @State heightSize: number = 100
  private flag: boolean = true
 
  build() {
    Column() {
      Button('change size')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({}, () => {
              this.widthSize = 150
              this.heightSize = 60
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
    }
      .width('100%')
      .margin({ top: 5 })
  }
}

---

属性动画 & 显式动画 - animation枚举说明：

animation - Curve枚举说明：

• Linear：表示动画从头到尾的速度都是相同的。
• Ease：表示动画以低速开始，然后加快，在结束前变慢。
• EaseIn：表示动画以低速开始。
• EaseOut：表示动画以低速结束。
• EaseInOut：表示动画以低速开始和结束。

animation - PlayMode枚举说明：

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

---

组件转场动画： 

组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。

代码示例：

@Entry
@Component
struct Index {
  @State flag: boolean = true
 
  build() {
    Column() {
      Button(this.flag ? '隐藏组件' : '展示组件')
        .margin(30)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        Image($r('app.media.icon'))
          .width(300)
          .height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }
      .width('100%')
  }
}

TransitionOptions枚举说明：

TransitionType枚举说明：

•  All：指定当前的Transition动效生效在组件的所有变化场景。
• Insert：指定当前的Transition动效生效在组件的插入显示场景。
• Delete：指定当前的Transition动效生效在组件的删除隐藏场景。