HarmonyOS 动画效果实现

现在有一个动画效果，从两侧开始向中间展示，有相关的api或者转场动画这种怎么实现？

HarmonyOS

put_get

2024-12-25 12:30:51

浏览

回答 1

按赞同

按时间

Excelsior_abit

转场动画可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-transition-V5

参考示例如下：

@Entry
@Component
struct ToggleExample {
  @State show: boolean = true
  build() {
    Column() {
      Button("启动过场动画").onClick(() => {
        this.show = !this.show
      })
      Stack() {
        Column() {
          Text("最终需展示组件").fontColor(Color.White)
        }.width("100%")
        .height("100%")
        .backgroundColor(Color.Red)

        if (this.show) {
          // 有过场动画的组件，一开始默认展示，没有动画，消失的时候，会有动画，变淡并缩小
          Column() {
            Text("过场动画组件").fontColor(Color.White)
          }.width("100%")
          .height("100%")
          .backgroundColor(Color.Blue)
          .transition(
            // TransitionEffect.scale({ z: 1, x: 0 })
            TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
              TransitionEffect.asymmetric(
                TransitionEffect.scale({ x: 1 }),
                TransitionEffect.scale({ x: 0 })
              )
            )
          )
        }
      }
      .width("100%")
      .layoutWeight(1)

    }
  }
}
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.