HarmonyOS 鸿蒙Next如何结束一个无限循环的关键帧动画

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何结束一个无限循环的关键帧动画

如何结束一个无限循环的关键帧动画

2 回复

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

import { UIContext } from '[@kit](/user/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()方法:如果animateTo返回了一个动画对象(如Animator),你可以直接调用该对象的cancel()方法来停止动画。
  2. 使用动画监听器:设置动画监听器,在动画开始或进行中通过监听器的回调方法调用cancel()来停止动画。
  3. 检查动画状态:在尝试停止动画前,检查动画是否正在运行。这可以通过动画对象的状态属性或相关方法来实现。
  4. 移除动画:如果动画是附加到某个视图或组件上的,你也可以尝试移除该动画,从而间接停止它。

请注意,停止动画可能会导致动画的当前状态与目标状态不一致,具体效果取决于动画的类型和停止时的状态。

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

回到顶部