鸿蒙Harmony（十）动画

属性动画

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

代码示例

@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State scaleX: number = 1
  @State scaleY: number = 1
  @State animChange: boolean = false

  build() {
    Row() {
      Column() {
        Button("按钮")
          .scale({ x: this.scaleX, y: this.scaleY, centerX: '50%', centerY: 0 })
          .animation({ duration: 1000, curve: Curve.Ease })
          .onClick(() => {
            if (this.animChange) {
              this.scaleX = 3
              this.scaleY = 3
            } else {
              this.scaleX = 1
              this.scaleY = 1
            }
            this.animChange = !this.animChange
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }
}

显式动画

显式动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果.

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

代码示例

@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State itemAlign: HorizontalAlign = HorizontalAlign.Start
  itemAlignList: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End]
  index: number=0

  build() {
    Row() {
      Column() {
        Button("按钮")
          .onClick(() => {
            animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
              this.itemAlign = this.itemAlignList[(this.index+1)%this.itemAlignList.length]
              this.index++
            });
          })
      }
      .alignItems(this.itemAlign)
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }
}

组件转场动画

组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。通过组件的transition属性来配置。
参考文档

transition(value: TransitionOptions)

transition函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和animateTo一起使用才能产生组件转场效果。

代码示例

@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State isBegin: boolean = false

  build() {
    Row() {
      Column() {
        Button("按钮")
          .onClick(() => {
            this.animAction()
          })
        if (this.isBegin) {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 100 })
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              rotate: { angle: -360 },
              scale: { x: 0, y: 0 },
            })
        }
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }

  animAction() {
    animateTo({ duration: 1000 }, () => {
      this.isBegin = true
    })
  }
}