鸿蒙HarmonyOS （开辟进阶）图像含糊动效优化

鸿蒙NEXT开辟实战往期必看文章：
一分钟相识”纯血版！鸿蒙HarmonyOS Next应用开辟！
“非常详细的” 鸿蒙HarmonyOS Next应用开辟学习路线！（从零根本入门到精通）
HarmonyOS NEXT应用开辟案例实践总结合（持续更新......）
HarmonyOS NEXT应用开辟性能优化实践总结（持续更新......）

---

概述

含糊效果是一种常见的图像处置惩罚技术，它通过削弱图像细节，去除干扰，使核心更加光显。如下图所示，含糊效果不但能加强界面空间感，还能清晰区分元素层级，是图像处置惩罚范畴中一项常用且紧张的技术本事。但当这一效果融入动态变化，便催生了含糊动效。含糊动效被广泛应用于页面之间的转场、图像元素的缩放等需要突出内容或改变用户关注点的场景中。
由于含糊算法需要对组件进行精细的像素级处置惩罚，当组件需要及时刷新时，这要求在极短的单个视频帧周期内完成含糊化处置惩罚。若组件同时还负担着繁重的动画渲染任务，则会进一步加剧计算资源的消耗，轻易导致含糊效果处置惩罚时间不足，无法按时完成含糊动效，最终引发卡顿、丢帧等不良现象。
因此，随着应用的广泛普及，含糊动效的性能优化愈发显得至关紧张。鉴于体系为开辟者提供的静态含糊和动态含糊两种动效本领，本文将对比静态与动态含糊在“转场结合图片含糊”的应用场景下的性能差别，发起开辟者在组件背景和内容无需及时更新的场景中，推荐利用静态含糊，可以淘汰应用卡顿与丢帧，提升用户体验。

利用场景

在介绍静态含糊和动态含糊之前，需要分析动态含糊和静态含糊的区别在于要含糊的内容是不是动态更新的，如对视频做含糊就是动态含糊，对图片做含糊就是静态含糊。

• 静态含糊：静态含糊是指对输入的静态内容进行含糊处置惩罚并获取一张含糊后的图像的含糊。适用于需要为静态图像提供含糊化效果的场景。Effect Kit在Filter图像效果类中提供了blur接口，可用于定义含糊半径，数值越大含糊效果越明显。
  

• 动态含糊：动态含糊是指含糊效果会随着每帧含糊内容和含糊半径的变化，进行及时变化的含糊。适用于含糊内容需要及时刷新和更改的场景。体系针对组件内容、背景的动态含糊提供了两种实现动态含糊的方法：backgroundBlurStyle和foregroundBlurStyle。这两个方法不能指定含糊半径、提亮、饱和度、蒙版颜色等具体参数，只能调用底层将这些参数封装好的含糊样式来实现不同风格的含糊效果。同时体系也为开辟者提供了能够自定义参数的backgroundEffect，可以对组件背景实现自定义含糊动效。如果只需要对组件进行简单的含糊处置惩罚，体系还提供了与静态含糊类似的简单方法blur和backdropBlur，只需要定义含糊半径即可。
  

场景示例

下面将在常见的“转场结合图片含糊”的应用场景下（全屏模态转场拉起一个图片设置含糊的模态页面)，分别采用动态含糊和静态含糊，进行性能分析对比。需要分析，由于静态含糊和动态含糊底层采用的算法不同，动态含糊blur和静态含糊blur设置的含糊半径数值并不等效。为了从效果一致性的维度来更准确的比力两者的性能差别，这里将动态含糊和静态含糊场景的含糊半径的数值尽大概的调解到类似的含糊效果来进行对比。动态含糊blur设置13，静态含糊blur设置3的图片含糊效果较为靠近，作为本例中效果一致性较为近似的等效条件。
下面是利用动态含糊对图片进行含糊处置惩罚的场景示例。通过直接对Image组件设置blur，为Image添加含糊效果。

1. @Entry
2. @Component
3. struct Index {
4.   @State isShowMotionBlur: boolean = false; // 是否显示全屏模态页面
6.   // 图片设置动态模糊的模态页面
7.   @Builder
8.   motionBlurBuilder() {
9.     Stack({ alignContent: Alignment.Bottom }) {
10.       Image($r('app.media.test'))
11.         .width('100%')
12.         .height('100%')
13.         .objectFit(ImageFit.Fill)
14.         .blur(13) // 添加动态模糊效果
15.       Button('close')
16.         .fontSize(20)
17.         .margin(10)
18.         .onClick(() => {
19.           this.isShowMotionBlur = false;
20.         })
21.     }
22.     .width('100%')
23.     .height('100%')
24.   }
26.   build() {
27.     Column({ space: 10 }) {
28.       Button('动态模糊')
29.         .margin(10)
30.         .onClick(() => {
31.           this.isShowMotionBlur = true;
32.         })
33.         .bindContentCover(this.isShowMotionBlur, this.motionBlurBuilder(), {
34.           modalTransition: ModalTransition.DEFAULT // 全屏模态转场类型。DEFAULT表示上下切换动画
35.         })
36.     }
37.     .width('100%')
38.     .height('100%')
39.     .justifyContent(FlexAlign.End)
40.   }
41. }

复制代码

下面是利用静态含糊对图片进行含糊处置惩罚的场景示例。主要步骤如下：

• 通过createPixelMap创建图片的PixelMap。
  
• 通过createEffect创建Filter实例。
  
• 通过Filter图像效果类中的blur，为Image添加含糊效果。
  

1. import { image } from '@kit.ImageKit'; // 导入图片处理模块
2. import { effectKit } from '@kit.ArkGraphics2D'; // 导入图像效果模块
4. @Entry
5. @Component
6. struct Index {
7.   @State isShowStaticBlur: boolean = false; // 是否显示全屏模态页面
8.   @State pixelMap: image.PixelMap | undefined = undefined; // PixelMap实例
9.   @State imgSource: image.ImageSource | undefined = undefined; // ImageSource实例
11.   // 静态模糊
12.   async staticBlur() {
13.     let context = getContext(this); // 获得当前Ability的Context
14.     let resourceMgr = context.resourceManager; // 获取resourceManager对象
15.     const fileData = await resourceMgr.getRawFileContent('test.png'); // 获取rawfile目录下的图片
16.     let buffer: ArrayBuffer = fileData.buffer.slice(0); // 创建ArrayBuffer实例
17.     this.imgSource = image.createImageSource(buffer); // 创建图片源实例
18.     // 创建像素的属性
19.     let opts: image.InitializationOptions = {
20.       editable: true, // 是否可编辑
21.       pixelFormat: 3, // 像素格式。3表示RGBA_8888
22.       size: {
23.         // 创建图片大小
24.         height: 4,
25.         width: 6
26.       }
27.     };
28.     // 创建PixelMap
29.     await this.imgSource.createPixelMap(opts).then((pixelMap: image.PixelMap) => {
30.       const blurRadius = 3; // 模糊半径
31.       let headFilter = effectKit.createEffect(pixelMap); // 创建Filter实例
32.       if (headFilter !== null) {
33.         headFilter.blur(blurRadius); // 设置静态模糊。将模糊效果添加到效果链表中
34.         // 获取已添加链表效果的源图像的image.PixelMap
35.         headFilter.getEffectPixelMap().then((pixelMap: image.PixelMap) => {
36.           this.pixelMap = pixelMap;
37.         });
38.       }
39.     })
40.   }
42.   // 图片设置静态模糊的模态页面
43.   @Builder
44.   staticBlurBuilder() {
45.     Stack({ alignContent: Alignment.Bottom }) {
46.       Image(this.pixelMap)
47.         .width('100%')
48.         .height('100%')
49.         .objectFit(ImageFit.Fill)
50.       Button('close')
51.         .fontSize(20)
52.         .margin(10)
53.         .onClick(() => {
54.           this.isShowStaticBlur = false;
55.         })
56.     }
57.     .width('100%')
58.     .height('100%')
59.   }
61.   build() {
62.     Column({ space: 10 }) {
63.       Button('静态模糊')
64.         .margin(10)
65.         .onClick(() => {
66.           this.isShowStaticBlur = true;
67.           // 设置静态模糊
68.           this.staticBlur();
69.         })
70.         .bindContentCover(this.isShowStaticBlur, this.staticBlurBuilder(), {
71.           modalTransition: ModalTransition.DEFAULT // 全屏模态转场类型。DEFAULT表示上下切换动画
72.         })
73.     }
74.     .width('100%')
75.     .height('100%')
76.     .justifyContent(FlexAlign.End)
77.   }
78. }

复制代码

效果对比

下面利用DevEco Studio内置的Profiler中的帧率分析工具Frame抓取点击按钮触发转场过程的trace来分析静态含糊和动态含糊场景下的性能差别。需要分析，由于场景示例通过点击按钮触发转场，以是可以通过User Events（用户输入变乱）的Click标签定位到转场过程的起点为Click标签竣事位置。转场过程的终点为连续的RenderFrame（实行GPU绘制）标签不再连续的位置。

如上图所示，通过RenderFrame（实行GPU绘制）标签可以看出，动态含糊转场匀称渲染耗时为6.113ms。同时从Present Fence（图形上屏信号）标签可以看出动态含糊转场匀称帧率为108.0fps。

如上图所示，通过RenderFrame标签可以看出，静态含糊转场匀称渲染耗时为3.357ms。同时从Present Fence标签可以看出静态含糊转场匀称帧率为119.9fps。和动态含糊转场相比匀称渲染耗时淘汰了约45%（性能耗时数据因应用场景、装备型号版本而异，以实测为准）。
由此可见，在含糊效果类似的条件下，静态含糊的性能要优于动态含糊。这源于底层实现机制的差别：静态含糊只需完成一次性的含糊处置惩罚，有效减轻了及时渲染的负担；而动态含糊则需要对每一帧进行连续的含糊计算，尽管在抱负环境下能够营造出更为平滑和连贯的视觉过渡效果，但同时也明显增加了渲染的复杂度和资源消耗，若页面过于复杂，反而大概导致卡顿或丢帧现象的发生。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。