HarmonyOS鸿蒙Next中动画结束回调怎么监听？

HarmonyOS鸿蒙Next中动画结束回调怎么监听？ 从文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5#transitioneffect10对象说明 中看到说指定该TransitionEffect的动画animation参数。参数描述：该参数只用来指定动画参数，其入参AnimateParam的onFinish回调不生效。那怎么才能接收到回调呢？


更多关于HarmonyOS鸿蒙Next中动画结束回调怎么监听？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以用animateTo定义动画参数，其中的onFinish可以设置。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5

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

@Entry
@Component
struct Index {
  @State showEvaluateComponent2: boolean = false;

  aboveToAppear(){
    console.log('6666')
  }
  build() {
    Column () {
      Text("button") {
      }.width(100).height(100).onClick(() => {
        animateTo({ duration: 200 }, () => {
          // 第一张图的TransitionEffect包含了animation，transition的动画参数由TransitionEffect指定
          // 第二张图的TransitionEffect不包含animation，transition的动画参数由animateTo指定
          this.showEvaluateComponent2 = !this.showEvaluateComponent2;

          promptAction.showToast({
            message: "动画结束"
          })
        });
      })

      if (this.showEvaluateComponent2) {
        Text("动画") {
        }
        .width(100)
        .height(100)
        .backgroundColor(Color.Green)

        .transition(
          TransitionEffect.asymmetric(
            TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 500, curve: Curve.EaseIn }),
            TransitionEffect.move(TransitionEdge.BOTTOM).animation({
              duration: 200,
              curve: Curve.EaseOut,
              onFinish: () => {
                promptAction.showToast({
                  message: "动画结束"
                })
              },
              finishCallbackType: FinishCallbackType.REMOVED
            })
          )
        )
        .animation({
          duration: 200, 
          curve: Curve.EaseOut, 
          onFinish: () => {
            promptAction.showToast({
              message: "动画结束"
            })
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中动画结束回调怎么监听？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，监听动画结束回调可以通过Animator的onFinish方法实现。具体步骤如下：

  1. 创建动画对象：使用Animator类创建动画对象。
  2. 设置动画结束回调：通过onFinish方法设置动画结束时的回调函数。

示例代码如下：

import animator from '@ohos.animator';

// 创建动画对象
let anim = animator.createAnimator();

// 设置动画结束回调
anim.onFinish(() => {
    console.log("Animation finished");
});

// 开始动画
anim.start();

在这个示例中，onFinish方法用于监听动画结束事件，当动画结束时，回调函数会被执行。

在HarmonyOS鸿蒙Next中，可以通过AnimatorValue或AnimatorGroup的finished属性来监听动画结束事件。具体步骤如下：

  1. 创建动画对象：使用AnimatorValue或AnimatorGroup创建动画。
  2. 设置结束回调：通过onFinish方法设置动画结束时的回调函数。
  3. 启动动画：调用start方法启动动画。

示例代码：

const animator = new AnimatorValue({ duration: 1000 });
animator.onFinish(() => {
    console.log('动画结束');
});
animator.start();

通过这种方式，可以在动画结束时执行自定义逻辑。

回到顶部