HarmonyOS 鸿蒙Next中如何实现沉浸光感特效

HarmonyOS 鸿蒙Next中如何实现沉浸光感特效

7 回复

尊敬的开发者，您好！

关于沉浸光感效果您可参考：沉浸光感-UI Design Kit（UI设计套件）。

该文档为API 23版本的开发文档，我们已为您向业务部门提交了查看API 23版本开发文档的权限申请，预计该权限将于今日20:00后开通，请您刷新下载中心和文档页面进行查看。感谢您的支持！

更多关于HarmonyOS 鸿蒙Next中如何实现沉浸光感特效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 5 沉浸光感特效实现（附官方有效链接）

一、核心代码（可直接运行）

ets

@Entry
@Component
struct ImmersiveLightEffect {
  build() {
    Stack() {
      // 1. 底层背景（被模糊的内容）
      Image($r('app.media.bg')) // 替换为你的背景图
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Cover)

      // 2. 背景模糊层（核心沉浸感）
      Column()
        .width('100%')
        .height('100%')
        .backdropBlur(30) // 背景模糊，数值越大越模糊
        .linearGradient({
          direction: GradientDirection.Bottom,
          colors: [[0xFFFFFF00, 0.0], [0x30FFFFFF, 1.0]]
        })

      // 3. 顶部/底部光效层（增强光感）
      Row()
        .width('100%')
        .height(200)
        .linearGradient({
          direction: GradientDirection.Top,
          colors: [[0x40FFFFFF, 0.0], [0x00FFFFFF, 1.0]]
        })
        .blur(80) // 高斯模糊柔化边缘
        .opacity(0.6)
    }
    .width('100%')
    .height('100%')
  }
}

二、关键 API 说明

表格

API 作用
backdropBlur(radius: number) 为组件后方的内容添加模糊，是实现系统级沉浸效果的核心
blur(radius: number) 为组件自身添加模糊，用于光效柔化
linearGradient() 线性渐变，模拟光感过渡
opacity() 控制光效透明度，调整沉浸感强弱

三、官方有效文档链接

参考 视效-UI Design Kit（UI设计套件）-应用框架 - 华为HarmonyOS开发者

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html，

参考 沉浸光感-UI Design Kit（UI设计套件）-应用框架 - 华为HarmonyOS开发者

此文档为受控资源

在HarmonyOS Next中，可使用ArkUI的Canvas组件绘制径向渐变与高斯模糊，搭配Image的colorFilter或contrast属性营造光晕效果；或通过自定义RenderNode节点结合动画API实现动态光感变化。利用BlendMode混合模式叠加光影，并设置组件边缘阴影与透明度过渡即可。

在HarmonyOS Next中实现沉浸光感特效，可通过叠加多层Stack、BlendMode和animateTo完成。以下示例展示点击按钮后向四周扩散的光晕效果：

@Entry
@Component
struct ImmersiveLightEffect {
  @State scale: number = 0
  @State opacity: number = 1

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Button("点击触发光感")
        .onClick(() => {
          this.scale = 0
          this.opacity = 1
          animateTo({ duration: 600, curve: Curve.EaseOut }, () => {
            this.scale = 4
            this.opacity = 0
          })
        })
        .zIndex(2)

      // 光感扩散层
      Circle()
        .width(100).height(100)
        .fill(new LinearGradient([{ color: "#FFD700", offset: 0 },
                                  { color: "#00FFFFFF", offset: 1 }]))
        .blendMode(BlendMode.SrcOver)
        .scale({ x: this.scale, y: this.scale })
        .opacity(this.opacity)
        .zIndex(1)
    }
    .width('100%').height('100%')
    .backgroundColor(Color.Black)
  }
}

实现要点：

  • 使用Circle绘制渐变光晕，渐变从中心亮金色过渡到全透明，形成自然光感。
  • 通过scale动画让光晕从小到大扩散，配合opacity从1到0增强消失感。
  • animateTo控制动画时长与缓动曲线，Curve.EaseOut使扩散效果先快后慢。
  • 可根据需求替换渐变颜色或形状，实现点击、触摸、页面转场等多种光感特效。
回到顶部