鸿蒙开发-想给UI加模糊和HDR效果？uiEffect效果级联详解

给 UI 加点特效模糊、提亮、效果级联你有没有注意到现在很多 APP 的 UI 都有一种毛玻璃效果比如 iOS 的控制中心、华为的下拉通知栏背景是模糊的前景内容清晰看起来特别有层次感。或者你有没有想过在展示 HDR 照片时让照片的高光区域亮起来比普通内容更耀眼HarmonyOS 的uiEffect模块就能帮你实现这些效果。它提供了两大类效果Filter滤镜和VisualEffect视觉效果可以给 UI 组件添加模糊、提亮等各种实时效果。导入模块import{uiEffect}fromkit.ArkGraphics2D;两大效果类型下面是 uiEffect 效果应用的整体流程模糊效果HDR 提亮背景模糊前景模糊创建 Filter 或 VisualEffect 实例添加效果类型调用 blur 方法设置半径调用 hdrBrightnessRatio 设置倍数效果级联可叠加多个效果选择应用位置backgroundFilter 应用到背景foregroundFilter 应用到前景组件渲染时自动应用效果在开始写代码之前先理解一下uiEffect的两大分类Filter滤镜效果包括模糊blur和 HDR 提亮hdrBrightnessRatio。Filter 是作用在组件的背景或前景上的。VisualEffect视觉效果目前主要是预留的扩展类。你可以通过createEffect()创建实例然后挂载到组件上。这两种效果可以级联——也就是说你可以在一个 Filter 或 VisualEffect 实例上叠加多个效果它们会按顺序依次生效。第一步创建效果实例创建 Filter 实例letfilter:uiEffect.FilteruiEffect.createFilter()创建 VisualEffect 实例letvisualEffect:uiEffect.VisualEffectuiEffect.createEffect()这两个方法返回的都是头节点你可以在这个实例上链式调用各种效果方法。第二步添加模糊效果模糊是 Filter 最常用的效果之一。调用blur方法就能给组件添加模糊// xxx.tsimport{uiEffect}fromkit.ArkGraphics2D;letfilter:uiEffect.FilteruiEffect.createFilter();filter.blur(10);EntryComponentstruct UIEffectFilterExample{build(){Column({space:15}){Text(UIEffectFilter).fontSize(20).width(75%).fontColor(#DCDCDC)Image($r(app.media.foreground)).width(100).height(100).backgroundImage($r(app.media.background)).backgroundImagePosition(Alignment.Center).backgroundImageSize({width:90,height:90}).backgroundFilter(filter)}.height(100%).width(100%)}}这段代码做了以下几件事创建了一个 Filter 实例。调用blur(10)设置模糊半径为 10。半径越大模糊效果越强半径为 0 时没有模糊效果。在组件上使用.backgroundFilter(filter)将这个 Filter 应用到组件的背景上。模糊半径的选择轻微模糊5~15适合做毛玻璃效果、背景虚化中等模糊20~50适合做景深效果、焦点突出强烈模糊50适合做占位图、加载中的占位效果backgroundFilter vs foregroundFilter.backgroundFilter(filter)效果作用在组件的背景上。比如你有一张背景图加上模糊后背景就变成毛玻璃了。.foregroundFilter(filter)效果作用在组件的前景内容上。比如你有一个 Text 组件加上模糊后文字就变模糊了。第三步添加 HDR 提亮效果从 API version 24 开始Filter 支持 HDR 提亮效果。这个效果能让组件的内容在 HDR 屏幕上显示得更亮、更耀眼。filter.hdrBrightnessRatio(2.0)这行代码设置了 2 倍的提亮倍数。也就是说组件内容的亮度会被提升到 SDR 参考白亮度的 2 倍。使用 HDR 提亮的注意事项需要权限调用这个方法需要ohos.permission.HDR_BRIGHTNESS权限记得在 module.json5 里声明。需要 HDR 渲染管线提亮效果需要开启 HDR 渲染管线才能生效。如果设备硬件不支持 HDR即使设置了也不会有效果。有性能开销HDR 提亮会带来一定的性能和功耗开销建议只在已有 HDR 图片或视频的场景使用。不建议嵌套使用如果在多层组件上都设置了 HDR 提亮可能会造成过曝现象。提亮倍数的范围最小值1.0等于不做任何处理最大值设备当前的最大亮度除以 SDR 参考白亮度设置小于 1.0 的值时按 1.0 处理设置超过最大值的值时按最大值处理实际场景做一个毛玻璃效果的音乐播放器很多音乐播放器的背景是当前专辑封面的模糊版本。用uiEffect实现起来非常简单import{uiEffect}fromkit.ArkGraphics2D;// 创建模糊滤镜letblurFilter:uiEffect.FilteruiEffect.createFilter();blurFilter.blur(30);EntryComponentstruct MusicPlayer{build(){Stack(){// 底层专辑封面作为背景加上模糊Image($r(app.media.album_cover)).width(100%).height(100%).backgroundFilter(blurFilter)// 上层播放控制界面Column(){// 专辑封面清晰版Image($r(app.media.album_cover)).width(250).height(250)// 播放按钮等...}.width(100%).height(100%).justifyContent(FlexAlign.Center)}.width(100%).height(100%)}}这里把模糊滤镜应用到背景图上前景的专辑封面保持清晰就能实现那种背景虚化、前景突出的视觉效果。实际场景HDR 照片展示如果你要做一个照片展示 APP支持 HDR 照片的提亮显示import{uiEffect}fromkit.ArkGraphics2D;// 创建 HDR 提亮滤镜lethdrFilter:uiEffect.FilteruiEffect.createFilter();hdrFilter.hdrBrightnessRatio(2.0);EntryComponentstruct PhotoViewer{build(){Column(){Image($r(app.media.hdr_photo)).width(100%).height(80%).backgroundFilter(hdrFilter)}.width(100%).height(100%)}}这样 HDR 照片在支持 HDR 的设备上就能显示出更亮、更生动的效果。效果级联叠加多个效果下面是效果级联的工作原理创建 Filter 实例添加第一个效果: blur添加第二个效果: hdrBrightnessRatio按添加顺序依次生效先执行模糊处理再执行 HDR 提亮输出最终视觉效果uiEffect的级联特性让你可以在一个 Filter 实例上叠加多个效果。比如你既要模糊又要提亮letfilter:uiEffect.FilteruiEffect.createFilter();filter.blur(20);filter.hdrBrightnessRatio(1.5);效果会按添加的顺序依次生效。先模糊再提亮。小结uiEffect模块的核心就是两个方法createFilter()创建 Filter 实例可以添加模糊和 HDR 提亮效果。createEffect()创建 VisualEffect 实例用于扩展更多视觉效果。把创建出来的实例通过.backgroundFilter()或.foregroundFilter()应用到组件上就能实现实时的视觉效果。这个模块最大的价值是让你用很少的代码就能实现复杂的视觉效果而且这些效果是系统级别的硬件加速性能比自己用 Canvas 画要好得多。如果你的 APP 需要毛玻璃效果、背景虚化、HDR 提亮等功能直接用uiEffect就对了。