HarmonyOS鸿蒙Next中如何在第三方应用启用沉浸光感折射效果

HarmonyOS鸿蒙Next中如何在第三方应用启用沉浸光感折射效果 hds.effect类型枚举中没有找到对应的效果,只有旧的点光源和描边

4 回复

开发者您好,沉浸光感的一些问题,可参考:华为手机沉浸光感视效相关问题汇总,若目前不能解决您的问题,麻烦您提供是在什么样的业务场景中使用该能力,交互流程是怎样的。

更多关于HarmonyOS鸿蒙Next中如何在第三方应用启用沉浸光感折射效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个效果属于HarmonyOS 6新引入的视觉特性,尚未在公共API中开放,用hds.effect可以实现类似小艺发光体的效果,可以试试改。

我跑了一下官方的demo,效果还行,可以参考一下:

cke_1975.jpeg

官方代码是:

import { hdsEffect } from '@kit.UIDesignKit';

@Entry
@Component
struct Index {
  @State controller: hdsEffect.ShaderEffectController = new hdsEffect.ShaderEffectController();

  build() {
    Column() {
      Stack() {
      }
      .visualEffect(new hdsEffect.HdsEffectBuilder()
        .shaderEffect({
          effectType: hdsEffect.EffectType.DUAL_EDGE_FLOW_LIGHT,
          animation: {
            duration: 4000,
            iterations: -1,
            autoPlay: true,
            onFinish: () => {
              console.info('Succeeded in finishing');
            }
          },
          controller: this.controller,
          params: {
            firstEdgeFlowLight: {
              startPos: 0,
              endPos: 1.0,
              color: '#1AD0F1',
            },
            secondEdgeFlowLight: {
              startPos: 0.5,
              endPos: 1.5,
              color: '#FFA4E5',
            }
          }
        })
        .buildEffect())
      .width(200)
      .borderRadius('50%')
      .clip(true)
      .height(200)
      .backgroundColor('#383838')
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
    .width('100%')
    .height('100%')
  }
}

在HarmonyOS Next中,第三方应用启用沉浸光感折射效果需使用ArkUI组件。通过window.setWindowSystemBarProperties接口设置状态栏和导航栏为透明,结合@ohos.graphics.display模块获取屏幕信息。在UI组件上应用blur模糊效果或backgroundBlurStyle属性,并配合linearGradient等实现光感渐变。需在module.json5中声明ohos.permission.SYSTEM_FLOAT_WINDOW权限。

在HarmonyOS Next中,第三方应用目前无法直接启用系统级的沉浸光感折射效果。该效果是系统为特定场景(如系统应用、特定控件)保留的视觉特性,其底层实现(如hds.effect枚举)并未向第三方开发者开放对应的API。

您观察到的hds.effect枚举中只包含“点光源”、“描边”等基础效果是符合当前设计规范的。要模拟类似的视觉风格,建议通过以下技术路径自行实现:

  1. 使用自定义绘制与模糊效果:在需要呈现该效果的界面区域(如顶部背景),使用CanvasCustomNode进行自定义绘制。结合GraphicsContext的模糊滤镜(如Blur效果),并叠加半透明的渐变层,可以营造出类似的光感朦胧与层次感。
  2. 利用组件背景与遮罩:为ColumnRowStack等容器组件设置背景色时,使用LinearGradientRadialGradient创建细腻的色彩过渡。再结合ClipOpacityBlendMode等图形效果,可以模拟光线折射的色彩变化和透明质感。
  3. 关注ArkUI动画与状态交互:通过属性动画(animateTo)或显式动画(Animation)驱动背景色、模糊度或遮罩参数的连续变化,使其能与用户的滚动、点击等操作产生联动,增强动态的光感反馈。

由于系统未提供直接调用的接口,实现沉浸光感折射效果需要较高的自定义UI开发成本。请密切关注官方发布的API更新,以获取未来可能开放的相关能力。

回到顶部