HarmonyOS 鸿蒙Next 帧动画如何主动停止

发布于 1周前 作者 eggper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 帧动画如何主动停止

this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
{
// 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
duration: 800,
event: () => {
this.myScale = 1.5;
}
},
{
// 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
duration: 500,
event: () => {
this.myScale = 1;
}
}
]);

关键帧动画的iterations设置-1，是否有方法可以主动停止动画


更多关于HarmonyOS 鸿蒙Next 帧动画如何主动停止的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
可以通过新启一个duration为0的animateTo动画来打断原有动画效果，参考demo如下： 
import { UIContext } from '@kit.ArkUI';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct KeyframeDemo {
  [@State](/user/State) myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;
  [@State](/user/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 })
  }
}

更多关于HarmonyOS 鸿蒙Next 帧动画如何主动停止的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，主动停止帧动画可以通过以下几种方式实现：

  1. 调用动画对象的cancel()方法：如果帧动画是通过Animator或类似动画对象实现的，可以直接调用该对象的cancel()方法来停止动画。
  2. 使用动画监听器：设置动画监听器，在动画进行过程中通过监听器的回调方法调用cancel()来停止动画。
  3. 移除动画：如果帧动画是附加到某个视图或组件上的，可以尝试移除该动画，从而间接停止它。
  4. 状态管理：如果帧动画是由组件状态触发的，可以通过改变状态来停止动画。例如，定义一个布尔变量来控制动画的播放状态，在需要停止动画时，将变量设置为false，并在动画逻辑中检查该变量以决定是否继续播放动画帧。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部