HarmonyOS 动画使用问题

代码如下：

@Entry
@Component
struct AnimationPage {
  @State message: string = 'Hello World';
  @State visible: boolean = false
  build() {
    Column() {
      Button('click to show').margin({ top: 20, bottom: 20 })
        .onClick(() => {
          this.visible = !this.visible
        })

      Column() {

      }
      .width(100)
      .height(100)
      .visibility(this.visible ? Visibility.Visible : Visibility.Hidden)
      .backgroundColor(Color.Red)
      .transition(TransitionEffect.opacity(0.8).animation({
        duration: 2000,
        onFinish: () => {
          console.log("AnimationTest", "animation finish")
        }
      }))
      .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
        if (!isVisible && currentRatio <= 0) {
          console.log("AnimationTest", "visibleAreaChange")
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}
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.

在上述代码中，如何监听动画结束回调？

.transition(TransitionEffect.opacity(0.8).animation({
  duration: 2000,
  onFinish: () => {
    console.log("AnimationTest", "animation finish")
  }
}))
1.
2.
3.
4.
5.
6.

onFinish没有回调如何监听到动画开始和结束的回调呢？

HarmonyOS

zbw_apple

2024-12-25 12:18:32

浏览

回答 1

按赞同

按时间

put_get

文档中对animation参数的说明，其入参AnimateParam的onFinish回调不生效。https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5#transitioneffect10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E

参考示例如下：

// 使用animateTo显示动画处理在onFinish回调中监听动画结束
@Entry
@Component
struct TransitionEffectExample1 {
  @State flag: boolean = false;
  @State show: string = 'show';
  @State visible: boolean = false;
  @State columnOpacity: number = 1;

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          this.flag = !this.flag;
          // 点击Button控制Image的显示和消失
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }
          animateTo({
            duration: 1000,
            curve: Curve.EaseOut,
            iterations: 1,
            playMode: PlayMode.Alternate,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.visible = !this.visible
          })
        })
      Column() {
      }
      .onClick(() => {
        console.log("click");
      })
      .backgroundColor(Color.Red)
      .width(200)
      .height(200)
      .opacity(this.columnOpacity)
      .visibility(this.visible ? Visibility.Visible : Visibility.Hidden)
    }.width('100%')
  }
}
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.

2024-12-25 16:02:27

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 动画使用问题

订阅鸿蒙技术特刊，精选内容抢先看