鸿蒙Next页面跳转透明过渡实现方式

在鸿蒙Next开发中，如何实现页面跳转时的透明过渡效果？目前尝试了常规的页面路由跳转，但切换时会出现黑屏或者白屏的闪屏现象，想要实现类似iOS那种平滑的透明渐变过渡效果。请问应该通过修改PageAbility的配置还是使用特定的动效API来实现？如果有代码示例就更好了。

2 回复

鸿蒙Next里想玩透明过渡？简单！在PageTransition里设置opacity动效就行。比如从1.0渐变到0.0，页面就像幽灵一样淡出。记得搭配transition动画曲线，丝滑得像德芙！代码三行搞定，妈妈再也不用担心我的跳转生硬了~

更多关于鸿蒙Next页面跳转透明过渡实现方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，实现页面跳转的透明过渡效果可以通过以下步骤完成，主要涉及页面路由和自定义转场动画。以下是具体实现方式及示例代码：

1. 设置透明背景

在目标页面的aboutToAppear方法中，将窗口背景设置为透明：

import window from '@ohos.window';

aboutToAppear() {
  let context = getContext(this) as common.UIAbilityContext;
  window.getLastWindow(context).then((win) => {
    win.setWindowBackgroundColor('#00000000'); // ARGB透明色
  });
}

2. 配置页面路由动画

在router.pushUrl中指定自定义动画，使用WindowTransition实现透明渐变效果：

import router from '@ohos.router';

// 跳转到目标页面，并配置透明过渡动画
router.pushUrl({
  url: 'pages/TransparentPage',
  params: { /* 可选参数 */ }
}, router.RouterMode.Single, (err) => {
  if (err) {
    console.error('Push failed: ' + JSON.stringify(err));
  }
}, {
  // 自定义进入和退出动画
  enter: {
    // 从完全透明到不透明
    opacity: 0.0,
    transform: { translateX: '100%' } // 可调整方向
  },
  exit: {
    // 从当前状态渐变到透明
    opacity: 1.0,
    transform: { translateX: '0%' }
  }
});

3. 完整示例代码

源页面（Index.ets）：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('跳转到透明页面')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/TransparentPage'
          }, router.RouterMode.Single, (err) => {
            if (err) {
              console.error('Push failed');
            }
          }, {
            enter: { opacity: 0.0, transform: { translateX: '100%' } },
            exit: { opacity: 1.0, transform: { translateX: '0%' } }
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

目标页面（TransparentPage.ets）：

@Entry
@Component
struct TransparentPage {
  aboutToAppear() {
    // 设置窗口透明背景
    let context = getContext(this) as common.UIAbilityContext;
    window.getLastWindow(context).then((win) => {
      win.setWindowBackgroundColor('#00000000');
    });
  }

  build() {
    Column() {
      Text('这是透明页面')
        .fontSize(20)
        .fontColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#00000000') // 页面内容区域透明
  }
}

注意事项：

  1. 窗口背景透明：需在aboutToAppear中调用setWindowBackgroundColor，确保生效。
  2. 动画参数调整：可通过修改opacity和transform控制过渡效果（如平移、缩放）。
  3. 兼容性：确保设备/模拟器支持鸿蒙Next的API版本。

通过以上步骤，即可实现页面跳转时的透明过渡效果。

回到顶部