显式动画 animateTo

显式动画 animateTo

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

• 如果需要在组件出现时创建动画，在onAppear中实现动画的创建
• 依赖UI的执行上下文，不可在UI上下文不明确的地方使用 请使用this.getUIContext().animateTo获取
• 不要在aboutToAppear中调用，此时自定义组件内的build还未执行，内部组件还未创建，动画时机过早，动画属性没有初值无法对组件产生动
• 可连续动画 在onFinish连续调用animateTo
• 属性可绑定多个组件同时动画

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

@ComponentV2
export struct AnimationToComponent {
  @Local _width: number = 100;
  @Local _background: Color = Color.Orange;
  @Local _size: number = 12;

  updateProperty() {
    this.getUIContext().animateTo({
      // 动画持续时间 ms，默认1000
      duration: 1000,
      // 动画曲线，默认Curve.EaseInOut
      curve: Curve.FastOutSlowIn,
      // 延迟动画 ms，默认0
      delay: 100,
      // 动画次数，默认1，设置-1为无限动画
      iterations: 1,
      // 动画播放模式，默认播放完成后重头开始播放(PlayMode.Normal)
      playMode: PlayMode.Alternate,
      // 动画完成回调，无限动画不会触发；UIAbility切换后台会立即结束执行中得有限循坏动画并触发回调
      onFinish: () => {
        hilog.info(0x0123, '', '动画1')
        // 连续动画
        animateto({
            onFinish: () => {
                hilog.info(0x0123, '', '动画2')
                // 连续动画
                animateTo({
                    onFinish: () => {
                        hilog.info(0x0123, '', '动画3')
                    }
                }, () => {
                    this._size = 10;
                })
            }
        }, () => {
            this._size = 15;
        })
      }
    }, () => {
        // 闭包函数
        this._size = this._size === 12 ? 24 : 12;
        this._background = this._background === Color.Orange ? Color.Red : Color.Orange;
    })
  }

  build() {
    NavDestination() {
      Text('hello arkTs').fontSize(this._size).backgroundColor(this._background).height(48)
      Text('hello harmonyos').fontSize(this._size).backgroundColor(this._background).height(48).margin({ top: 10, bottom: 10 })
      Button('绑定多个组件')
        .onClick(() => {
          this.updateProperty();
        })
        .onAppear(() => {
          this.updateProperty();
        })
    }
    .width('100%')
    .height('100%')
  }
}