在HarmonyOS NEXT开发中无感转场动画推荐方案？

Question

在HarmonyOS NEXT开发中无感转场动画推荐方案？

Answer 1

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

平移滑出可通过设置 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%') 
  } 
}

可以参考此 codelab 实例，里面有各种转场动画。

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

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