关键帧动画 keyframeAnimateTo

关键帧动画 keyframeAnimateTo

• 指定若干个关键帧状态，实现分段的动画
• 需要通过UIContext实例对象调用this.getUIContext().keyframeAnimateTo

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

@ComponentV2
export struct keyframeAnimateToComponent {
  @Local _x: number = 0;
  @Local _y: number = 0;

  build() {
    NavDestination() {
      Column() {
        Button('关键帧动画')
            .margin({ bottom: 10 })
            .onClick(() => {
                // 指定若干个关键帧状态，实现分段的动画
                this.getUIContext().keyframeAnimateTo({
                    // 动画的整体延时时间
                    delay: 100,
                    // 动画播放次数
                    iterations: 1,
                    onFinish: () => {
                        hilog.info(0x0123, '', '动画完成')
                    }
                }, [
                    // 分段动画1
                    {
                        // 该段关键帧动画的持续时间 ms
                        duration: 300,
                        curve: Curve.Linear,
                        // 指定在该关键帧时刻状态的闭包函数，即在该关键帧时刻要达到的状态
                        event: () => {
                            this._x = 300
                        }
                    },
                    // 分段动画2
                    {
                        duration: 300,
                        curve: Curve.Linear,
                        event: () => {
                            this._y = 300
                        }
                    },
                    // 分段动画3
                    {
                        duration: 300,
                        curve: Curve.Linear,
                        event: () => {
                            this._x = 0
                        }
                    },
                    // 分段动画4
                    {
                        duration: 300,
                        curve: Curve.Linear,
                        event: () => {
                            this._y = 0
                        }
                    }
                ])
            })
        Row() {}.translate({ x: this._x,  y: this._y }).width(20).height(20).backgroundColor(Color.Red).borderRadius('50%')
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
  }
}