HarmonyOS 鸿蒙Next如何取消某些页面的转场特效

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

HarmonyOS 鸿蒙Next如何取消某些页面的转场特效

pageTransition是全局生效。比如我的页面push一个“登录”，需要转场特效。 另外一个push“个人”中心，不需要转场。

三个页面：【登录、主页、个人】
默认进入到【主页】
【主页】push【登录】，【登录】从下进入，【主页】从上消失
【主页】push【个人】,【个人】从上进入，【主页】从下消失
pageTransition是无论push【登录】还是【个人】，效果都是一个动画
我是需要根据push的页面不同而进行不同的动画。请问怎么实现


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

Harmonyos Next教程
2 回复

加一个变量控制一下动画滑出的参数值slide,可以参考以下demo:

//index.ets

import router from '[@ohos](/user/ohos).router'

@Entry
[@Component](/user/Component)
struct Index {
  @State flag: string = "Page1"

  build() {
    Column() {

      Text("我是主页面")
        .fontSize(60)
        .backgroundColor(Color.Pink)

      Text("点击跳转登录页")
        .fontSize(40)
        .backgroundColor(Color.Orange)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          router.pushUrl({ url: 'pages/Page1' })
        })
      Text("点击跳转个人页")
        .fontSize(40)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.flag = "Page2"
          router.pushUrl({ url: 'pages/Page2' })
        })
    }
    .width("100%").height("100%")

  }

  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(this.flag === "Page1" ? SlideEffect.Top : SlideEffect.Bottom)
    PageTransitionExit({ duration: 1200 })
      .slide(SlideEffect.Top)
  }
}

//Page1.ets

import router from '[@ohos](/user/ohos).router'
[@Component](/user/Component)
struct Page1 {
  build() {
    Column() {
      Text("我是登录页")
        .fontSize(40)
        .textAlign(TextAlign.Center)
    }
    .backgroundColor(Color.Orange)
    .width('100%')
    .height('100%')
    .onClick(() => {
      router.pushUrl({ url: 'pages/Index' })
    })
  }

  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Bottom)
    PageTransitionExit({ duration: 1200 })
      .slide(SlideEffect.Top)
  }
}

// Page2.ets

import router from ‘@ohos.router’ @Component struct Page2 { build() { Column() { Text(“我是个人页”) .fontSize(40) .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) } .backgroundColor(Color.Gray) .width(‘100%’) .height(‘100%’) .onClick(() => { router.pushUrl({ url: ‘pages/Index’ }) }) }

pageTransition() { PageTransitionEnter({ duration: 1200 }) .slide(SlideEffect.Top) PageTransitionExit({ duration: 1200 }) .slide(SlideEffect.Bottom) }

}

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


在HarmonyOS鸿蒙Next中，取消某些页面的转场特效可以通过以下方式实现：

首先，在需要取消转场特效的页面类中（通常由@Entry修饰），重写pageTransition函数。这个函数用于定义页面进入和退出时的转场效果。

其次，在pageTransition函数中，设置PageTransitionEnter和PageTransitionExit的type属性为RouteType.None，并将duration属性设置为0。这表示页面进入和退出时不应用任何转场动画，且动画持续时间为0。

例如：

pageTransition() {
    PageTransitionEnter({type: RouteType.None, duration: 0});
    PageTransitionExit({type: RouteType.None, duration: 0});
}

需要注意的是，虽然这种方法可以简单地取消转场特效，但目前华为并不推荐这种pageTransition方式设置转场动画。然而，对于不复杂的业务场景或特殊动画效果，该方法仍然是一个可行的选择。

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

回到顶部