HarmonyOS鸿蒙Next中应用如何取消页面转场动画

HarmonyOS鸿蒙Next中应用如何取消页面转场动画

鸿蒙应用如何取消页面转场动画

3 回复

一、结论

当A页面切换至B页面时，系统会自带左右进场退场的动画效果。一般来说，该效果是ok的，但是在特殊场景下，例如： A页面跳到B页面，又跳到C页面。C页面直接返回到A页面。正常不处理时，C到A会有两次页面切换的动画，最终才能展示到A页面。此时就需要能将B页面的转场动画取消。

在页面中，即@Entry修饰的页面类中，需要重写函数pageTransition，实现PageTransitionEnter页面进入，PageTransitionExit页面退出两个实例。

当需要禁止转场动画时，将duration时间设置为0即可。

【目前华为不推荐该pageTransition方式设置转场动画，不过该方法设置起来很简单，若不是较为复杂的业务or动画特殊效果可以如此设置。】

二、代码实现和详细解释

当需要禁止转场动画时，将duration时间设置为0即可。

// 入场动效：从右侧滑入，时长0ms，对所有路由类型生效

/**
 * 禁用页面转场动画
 */
[@Entry](/user/Entry)
@Component
struct PageTransitionPage {
  
  @State isBackA: boolean = true;

  build() {
    Stack(){
      Text("页面B")
        .size({ width: "100%", height: "100%"})
    }
  }

  pageTransition() {
    if(this.isBackA){
      PageTransitionEnter({ type: RouteType.None, duration: 0 })
      PageTransitionExit({ type: RouteType.None, duration: 0 })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中应用如何取消页面转场动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，取消页面转场动画可通过配置页面路由实现。在router.pushUrl()方法中，设置router.RouterOptions的mode参数为router.RouterMode.Single，同时将params中的router.AnimationType设置为router.AnimationType.None。例如：

router.pushUrl({
  url: 'pages/NextPage',
  params: {
    animationType: router.AnimationType.None
  }
}, router.RouterMode.Single)

此配置将禁用该次页面跳转的转场动画。

在HarmonyOS Next中，可以通过以下两种主要方式取消或自定义页面转场动画：

  1. 在PageTransition接口中设置空动画 在页面的aboutToAppear或页面构建函数中，使用pageTransition方法并返回一个动画时长为0的配置。 示例代码：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  pageTransition(): PageTransition {
    // 创建并返回一个无动画效果的页面转场配置
    return PageTransitionEnter({ duration: 0 })
      .combine(PageTransitionExit({ duration: 0 }));
  }

  build() {
    // 页面内容
  }
}

  2. 使用全局路由配置 在EntryAbility的onWindowStageCreate生命周期中，通过windowStage.getMainWindow()获取窗口对象，并设置其路由动画参数。 示例代码：

    onWindowStageCreate(windowStage: window.WindowStage): void {
  let mainWindow = windowStage.getMainWindow();
  if (mainWindow) {
    // 设置路由动画参数为无动画
    mainWindow.setWindowTransition({ 
      enter: { duration: 0 }, 
      exit: { duration: 0 } 
    });
  }
  // ... 其他初始化代码
}

注意事项：

  • 第一种方法针对单个页面生效，优先级高于全局配置。
  • 第二种方法影响整个应用的路由转场效果。
  • 直接取消动画可能会影响用户体验，建议在必要时使用。

以上方法适用于HarmonyOS Next的Stage模型应用开发。

回到顶部