HarmonyOS 鸿蒙Next sharedTransition切换过程有灰色阴影

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

HarmonyOS 鸿蒙Next sharedTransition切换过程有灰色阴影

QQ20241024-160225.png

求助,如何去掉灰色阴影?

下面是我的代码

import { router } from '@kit.ArkUI';
@Component
struct SharePage1 {
  build() {
      Column() {
        Image($r('app.media.startIcon'))
          .width(50)
          .height(50)
          .sharedTransition('myImage', { duration: 400 })
          .onClick(() => {
            router.pushUrl({ url: 'pages/SharePage2' });
          })
      }
      .width('100%')
      .height('100%')
  }
}
import { router } from '@kit.ArkUI';
@Component
struct SharePage2 {
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width(100)
        .height(100)
        .sharedTransition('myImage', { duration: 400 })
        .onClick(() => {
          router.back();
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next sharedTransition切换过程有灰色阴影的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不是sharedTransition切换有灰边,用router就是会有这样的效果,我理解是鸿蒙规格如此。而且router已经不推荐使用了,相关的文档已经停止维护,后续也不会有新的特性更新,还是及早切换成navigation吧。可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-router-to-navigation-V5

也可以看下工程级的路由架设:https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-application-navigation-design-V5

此外华为三方仓已经有了封装完善的路由库可以使用:

[https://ohpm.openharmony.cn/#/cn/detail/@hadss%2Fhmrouter](https://ohpm.openharmony.cn/#/cn/detail/@hadss%2Fhmrouter)

让router的话题告一段落吧!

更多关于HarmonyOS 鸿蒙Next sharedTransition切换过程有灰色阴影的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


灰色阴影是页面导航转场的遮罩,跟sharedTransition没关系,如需自定义导航转场可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-transition-V5

页面转场动画 (不推荐):https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-page-transition-animation-V5

针对帖子标题“HarmonyOS 鸿蒙Next sharedTransition切换过程有灰色阴影”的问题,以下是专业且直接的回答:

在HarmonyOS鸿蒙Next系统中,sharedTransition切换过程中出现灰色阴影可能是由于动画过渡效果设置不当或系统渲染问题导致的。

首先,检查你的动画资源文件,确保transition动画的起始和结束状态设置正确,没有引入不必要的透明度或颜色变化。此外,确认动画的持续时间和插值器是否符合设计要求,以避免在切换过程中出现突兀的视觉效果。

其次,检查你的应用代码,特别是与Activity或Fragment切换相关的部分。确保在启动新的Activity或Fragment时,正确设置了共享元素过渡的属性,如transitionName等,并且这些属性在源和目标组件中保持一致。

如果以上步骤均无法解决问题,可能是系统本身的渲染问题或bug。此时,可以尝试更新系统到最新版本,看是否有修复此问题的补丁。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。他们将能够提供更具体的帮助和解决方案。

回到顶部