HarmonyOS Next中如何基于HMRouter实现全局自定义转场动效？

Question

如题：HarmonyOS Next中如何基于HMRouter实现全局自定义转场动效？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//定义全局页面转场效果。开发者只需要创建出IHMAnimator.Effect实例，在参数中按照业务需求对动画方向direction，透明度opacity，横纵方向页面缩放效果scale进行配置即可。
const globalPageTransitionEffect: IHMAnimator.Effect = new IHMAnimator.Effect({
  direction: IHMAnimator.Direction.BOTTOM_TO_TOP,
  opacity: { opacity: 0.5 },
  scale: { x: 0.5, y: 0.2 }
})
//定义完成后，只需要将实例传入HMNavigation组件的standardAnimator参数即可。
HMNavigation({
  navigationId: 'mainNavigationId', homePageUrl: 'HomeContent', options: {
    standardAnimator: globalPageTransitionEffect,
  }
})
//定义全局弹窗效果。同样的，开发者也只需要按照业务需求创建出对应的IHMAnimator.Effect实例，代码示例如下。
const globalDialogTransitionEffect: IHMAnimator.Effect = new IHMAnimator.Effect({
  direction: IHMAnimator.Direction.BOTTOM_TO_TOP,
  opacity: { opacity: 1 },
  scale: { x: 1, y: 1 }
})
//将创建好的实例作为dialogAnimator的参数进行传入即可。
HMNavigation({
  navigationId: 'mainNavigationId', homePageUrl: 'HomeContent', options: {
    dialogAnimator: globalDialogTransitionEffect,
  }
})

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。