HarmonyOS 鸿蒙Next 使Navigation/NavDestination 页面切换的简单动画是否也需要使用customNavContentTransition进行自定义

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使Navigation/NavDestination 页面切换的简单动画是否也需要使用customNavContentTransition进行自定义

我目前app导航使用了Navigation/NavDestination实现，想在其中一种page中进/出都使用从底部切入切出的效果。能否在NavDestination的页面 中直接使用PageTransitionEnter/PageTransitionExit这些方式实现呢。只想实现简单的页面切换效果，自定义动画需要实现引入的代码有点多。


更多关于HarmonyOS 鸿蒙Next 使Navigation/NavDestination 页面切换的简单动画是否也需要使用customNavContentTransition进行自定义的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复
PageTransitionEnter/PageTransitionExit的方式已经不推荐使用，Navigation布局建议使用导航转场的方式：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-transition-V5

您可参考navigation示例3demo

更多关于HarmonyOS 鸿蒙Next 使Navigation/NavDestination 页面切换的简单动画是否也需要使用customNavContentTransition进行自定义的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


确实，这个官方给的代码我看过了，复杂到离谱。我是实现一个侧边Navigation的dialog ,有背景的不透明度渐变，内部从左向右出来。定义动画的时候，按官方的方式抄了一点我就放弃了。最后直接干掉了它的动画，直接展示。因为dialog的这个设定，背景是全透明的。我直接在dialog做出现动画就伪装过去了。

但是一般界面不行。一般界面会强制给一个白色的backgroud...没有动画，直接跳转，这个白是瞬间出来了。。。最后我也放弃了。。。。

在HarmonyOS鸿蒙Next系统中，实现Navigation/NavDestination页面切换的简单动画，通常不需要使用customNavContentTransition进行复杂自定义。系统已经提供了一些内置的动画效果，可以通过配置实现基本的页面切换动画。

以下是一个简单的示例，展示了如何在HarmonyOS鸿蒙Next系统中配置页面切换动画：

  1. 配置页面跳转动画（资源文件）

    在resources/base/animation目录下创建动画资源文件，例如slide_in_left.json和slide_out_right.json，用于定义进入和退出动画。

    slide_in_left.json：

    {
  "duration": 300,
  "timingFunction": "easeInOut",
  "alpha": {
    "from": 0.0,
    "to": 1.0
  },
  "translationX": {
    "from": -100.0,
    "to": 0.0
  }
}

    slide_out_right.json：

    {
  "duration": 300,
  "timingFunction": "easeInOut",
  "alpha": {
    "from": 1.0,
    "to": 0.0
  },
  "translationX": {
    "from": 0.0,
    "to": 100.0
  }
}

  2. 配置页面切换动画（XML布局文件）

    在目标页面的Page标签中，通过ohos:enterAnimation和ohos:exitAnimation属性引用动画资源。

    <Page
    ohos:id="$+id:target_page"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:enterAnimation="$graphic:slide_in_left"
    ohos:exitAnimation="$graphic:slide_out_right">
    <!-- 页面内容 -->
</Page>

  3. 实现页面跳转

    使用Intent进行页面跳转时，系统会自动应用配置的动画效果。

    Intent intent = new Intent();
intent.setElement(new ElementName("com.example.myapp", "com.example.myapp.TargetPageAbility"));
startAbility(intent);

通过以上配置，当从当前页面跳转到目标页面时，系统会自动应用配置的进入和退出动画。这种方式简单且有效，无需使用customNavContentTransition进行复杂的自定义。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部