属性动画 animation

属性动画 animation

属性动画只对写在animation前面的属性生效，且对组件构造器的属性不生效

import { hilog } from "@kit.PerformanceAnalysisKit";

@ComponentV2
export struct AnimationComponent {
  @Local _width: number = 100;
  @Local _angle: number = 0;
  @Local _background: Color = Color.Orange;

  build() {
    NavDestination() {
      Column() {
        Column({ space: 10 }) { // 对组件构造器参数属性不生效

        }
          .width(this._width) // 生效 只对写在animation前面的属性生效
          .aspectRatio(1)
          .rotate({ x: 0, y: 0, z: 1, angle: this._angle }) // 生效 只对写在animation前面的属性生效
          .animation({
            // 动画持续时间 ms，默认1000
            duration: 300,
            // 动画曲线，默认Curve.EaseInOut
            curve: Curve.FastOutSlowIn,
            // 延迟动画 ms，默认0
            delay: 100,
            // 动画次数，默认1，设置-1为无限动画
            iterations: 100,
            // 动画播放模式，默认播放完成后重头开始播放(PlayMode.Normal)
            playMode: PlayMode.Alternate,
            // 动画完成回调，无限动画不会触发；UIAbility切换后台会立即结束执行中得有限循坏动画并触发回调
            onFinish: () => {
              hilog.info(0x0123, '', '动画播放完成')
            }
          })
          .backgroundColor(Color.Orange) // 不生效 只对写在animation前面的属性生效，这个写在animation后面不会生效
          .onClick(() => {
            this._width = this._width === 100 ? 200 : 100;
            this._angle = this._angle === 150 ? 0 : 150;
            this._background = this._background === Color.Orange ? Color.Red : Color.Orange;
          })
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .padding({ left: 8, right: 8 })
    }
    .width('100%')
    .height('100%')
  }
}