HarmonyOS 帧动画如何主动停止

可以通过新启一个duration为0的animateTo动画来打断原有动画效果，参考示例如下：

import { UIContext } from '@kit.ArkUI';

@Entry
@Component
struct KeyframeDemo {
  @State myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;
  @State isRecording: boolean = false;

  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }

  build() {
    Column() {
      Circle()
        .width(100)
        .height(100)
        .fill("#46B1E3")
        .margin(100)
        .scale({ x: this.myScale, y: this.myScale })
        .onClick(() => {
          if (!this.uiContext) {
            console.info("no uiContext, keyframe failed");
            return;
          }
          this.myScale = 1; // 设置关键帧动画整体播放无限次
          if (this.isRecording) {
            this.uiContext.keyframeAnimateTo({ iterations: -1 },
              [{
                // 关键帧动画时长为800ms，scale属性做从1到1.5的动画
                duration: 800, event: () => {
                  this.myScale = 1.5;
                }
              }])
            this.isRecording = false
            animateTo({ duration: 0, iterations: 1, playMode: PlayMode.Normal }, () => {
              this.myScale = 1
            })
          } else {
            this.isRecording = true
            animateTo({ duration: 1500, iterations: -1, }, () => {
              this.myScale = 0.5;
            })
          }
        })
    }.width('100%').margin({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.