HarmonyOS 鸿蒙Next如何监控动画的结束

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

HarmonyOS 鸿蒙Next如何监控动画的结束


private startAnimation() {
  const POSITION_ZERO = 0
  const PLAYBACK_COUNT = 2 //播放2次
  const ANIMATION_TIME = 100
  const TRANSLATE_OFFSET_X = 5

  this.mUnionVerifyBean.translateX = POSITION_ZERO;
  // 第一段动画时长为100ms，translateX属性从0到5
  // 第二段动画时长为100ms，translateX属性从5到0
  this.getUIContext().keyframeAnimateTo({ iterations: PLAYBACK_COUNT }, [
    {
      duration: ANIMATION_TIME,
      event: () => {
        this.mUnionVerifyBean.translateX = TRANSLATE_OFFSET_X
      }
    },
    {
      duration: ANIMATION_TIME,
      event: () => {
        this.mUnionVerifyBean.translateX = POSITION_ZERO;
      }
    }
  ]);
}

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

Harmonyos Next教程
3 回复

可通过onFinish来监听动画播放结束

// xxx.ets
import { UIContext } from '@kit.ArkUI';
@Entry
@Component
struct KeyframeDemo {
  @State myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;
  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;
          // 设置关键帧动画整体播放3次
          this.uiContext.keyframeAnimateTo({ iterations: 3,  onFinish: () => {
            console.info('play end')
          } }, [
            {
              // 第一段关键帧动画时长为800ms，scale属性做从1到1.5的动画
              duration: 800,
              event: () => {
                this.myScale = 1.5;
              }
            },
            {
              // 第二段关键帧动画时长为500ms，scale属性做从1.5到1的动画
              duration: 500,
              event: () => {
                this.myScale = 1;
              }
            }
          ]);
        })
    }.width('100%').margin({ top: 5 })
  }
}

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


 private startAnimation() {
    const POSITION_ZERO = 0
    const PLAYBACK_COUNT = 2 //播放2次
    const ANIMATION_TIME = 100
    const TRANSLATE_OFFSET_X = 5

    this.mUnionVerifyBean.translateX = POSITION_ZERO;
    // 第一段动画时长为100ms，translateX属性从0到5
    // 第二段动画时长为100ms，translateX属性从5到0
    this.getUIContext().keyframeAnimateTo({ iterations: PLAYBACK_COUNT,onFinish:()=>{
      //这里写动画结束后的逻辑
    } }, [
      {
        duration: ANIMATION_TIME,
        event: () => {
          this.mUnionVerifyBean.translateX = TRANSLATE_OFFSET_X
        }
      },
      {
        duration: ANIMATION_TIME,
        event: () => {
          this.mUnionVerifyBean.translateX = POSITION_ZERO;
        }
      }
    ]);
  }

在HarmonyOS 鸿蒙Next中，监控动画的结束可以通过监听动画状态或回调机制实现。具体方法如下：

  1. 使用Animator Listener：如果你使用的是Animator类（如ObjectAnimator、ValueAnimator等），可以通过设置AnimatorListener来监听动画的结束。例如，使用animator.addListener(new Animator.AnimatorListener() {...})，在onAnimationEnd(Animator animation)回调中处理动画结束的逻辑。

  2. 使用Animation Set Listener：如果你使用的是AnimationSet，可以通过设置Animation.AnimationListener来监听动画的结束。例如，使用animationSet.setAnimationListener(new Animation.AnimationListener() {...})，在onAnimationEnd(Animation animation)回调中处理动画结束的逻辑。

  3. 使用自定义回调：如果你在使用自定义动画框架或库，可能需要查看该框架或库的文档，了解如何设置动画结束时的回调。通常，这涉及到在动画类中定义一个回调接口，并在动画结束时调用该接口的方法。

这些方法均允许你在动画结束时执行特定操作，如更新UI、触发事件或开始新的动画。确保在动画创建和启动前正确设置这些监听器。

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

回到顶部