HarmonyOS 无感转场动画推荐方案

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

平移滑出可通过设置translate属性实现可以参考这个，向下滑出：

import curves from '@ohos.curves';

@Entry
@Component
struct TransitionEffectDemo {
  @State isPresent: boolean = true;

  // 第一步，创建TransitionEffect
  private effect: TransitionEffect =
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) })
      .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() }))
  build() {
    Stack() {
      if (this.isPresent) {
        Column() {
          Text('ArkUI')
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        // 第二步：将转场效果通过transition接口设置到组件
        .transition(this.effect)
      }

      // 边框
      Column()
        .width(155)
        .height(155)
        .border({
          width: 5,
          radius: 10,
          color: Color.Black
        })

      // 第三步：新增或者删除组件触发转场，控制新增或者删除组件
      Button('Click')
        .margin({ top: 320 })
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .width('100%')
    .height('60%')
  }
}
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.
46.
47.
48.
49.
50.

可以参考此codelab实例：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-TransitionAnimation里面有各种转场动画

ArkTS是不推荐页面转场动画的，为了实现更好的转场效果，推荐使用Navigation组件和模态转场。页面的转场动画请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-transition-animation-V5

通过pageTransition函数控制页面的进入和退出，具体进入和退出效果的属性参数以及示例可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-page-transition-animation-V5