鸿蒙UI开发——实时动态模糊效果

1、概 述

模糊效果可以用来体现界面空间的纵深感，区分前后元素的层级关系。ArkUI提供了5种接口来实现实时模糊。分别是：

• backdropBlur

• blur

以调节模糊半径方式来实现背景模糊和前景(内容)模糊

• backgroundBlurStyle

• foregroundBlurStyle

提供了更丰富的模糊样式设置来设置背景模糊和前景(内容)模糊

• motionBlur

为当前组件添加由缩放大小或位移变化引起的运动过程中的动态模糊效果，入参为模糊半径和锚点坐标。

【注意，我们避免滥用这个效果，实时模糊会增加性能开销】

下面针对这5中接口做详细介绍。

2、接口介绍

2.1、 backdropBlur

为组件添加背景模糊效果(可以自定设置模糊半径和灰阶参数)。接口定义如下：

// value为模糊半径，模糊半径越大越模糊，为0时不模糊。backdropBlur(value: number, options?: BlurOptions)

其中，BlurOptions是灰阶梯参数，定义如下：​​​​​​​

struct BlurOptions {
  
    grayscale: [number, number];}// grayscale属性说明如下：grayscale是灰阶模糊参数，两参数取值范围均为[0,127]。对图像中的黑白色进行色阶调整，使其趋于灰色更为柔和美观，对图像中的彩色调整没有效果。参数一表示对黑色的提亮程度，参数二表示对白色的压暗程度，参数值越大调整效果越明显（黑白色变得越灰），有效值范围0-127。例如：设置参数为（20,20），图片中的黑色像素RGB:[0, 0, 0]会调整为[20,20,20]，白色像素RGB:[255,255,255]会调整为[235,235,235]（255-20），图像中的彩色像素维持不变。

一个案例效果如下：

代码如下（注意第12行）：​​​​​​​

@Entry@Componentstruct BlurEffectsExample {
  
    build() {
  
      Column({ space: 10 }) {
  
        Text('backdropBlur')        .width('90%')        .height('90%')        .fontSize(20)        .fontColor(Color.White)        .textAlign(TextAlign.Center)        .backdropBlur(10) // 对背景进行模糊        .backgroundImage($r('图片资源路径'))        .backgroundImageSize({ width: 400, height: 300 })    }    .width('100%')    .height('50%')    .margin({ top: 20 })  }}

2.2、blur

为组件添加前景（内容）模糊效果。接口定义如下：​​​​​​​

// value为模糊半径，模糊半径越大越模糊，为0时不模糊。blur(value: number, options?: BlurOptions)

其中value与options的含义与backdropBlur相同，这里不赘述。

一个案例效果如下：

代码如下（第22行）：​​​​​​​

@Entry@Componentstruct Index1 {
  
    @State radius: number = 0;  @State text: string = '';  @State y: string = '手指不在屏幕上';  aboutToAppear() {
  
      this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ：" + this.y +    "\n" + "当前图片模糊程度为 : " + this.radius;  }  build() {
  
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
  
        Text(this.text)        .height(200)        .fontSize(20)        .fontWeight(FontWeight.Bold)        .fontFamily("cursive")        .fontStyle(FontStyle.Italic)      Image($r("图片资源路径"))        .blur(this.radius) // 使用blur接口为照片组件添加内容模糊效果        .height('100%')        .width("100%")        .objectFit(ImageFit.Cover)    }.height('100%')    .width("100%")    .onTouch((event?: TouchEvent) => {
  
        if(event){
  
          if (event.type === TouchType.Move) {
  
            this.y = Number(event.touches[0].y.toString()).toString();          this.radius = Number(this.y) / 10; // 根据跟手过程中的滑动距离修改模糊半径，配合模糊接口，形成跟手模糊效果        }        if (event.type === TouchType.Up) {
  
            this.radius = 0;          this.y = '手指离开屏幕';        }      }      this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ：" + this.y +      "\n" + "当前图片模糊程度为 : " + this.radius;    })  }}

2.3、 backgroundBlurStyle

为当前组件提供一种在背景和内容之间的模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。接口定义如下：​​​​​​​

// value: 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。// options: 背景模糊选项。backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)

其中BlurStyle是一个枚举，定义如下：​​​​​​​

enum BlurStyle {
  
   Thin, //轻薄材质模糊。 Regular, //普通厚度材质模糊。 Thick, //厚材质模糊。 BACKGROUND_THIN, //近距景深模糊。 BACKGROUND_REGULAR, //中距景深模糊。 BACKGROUND_THICK, // 远距景深模糊。 BACKGROUND_ULTRA_THICK, //超远距景深模糊。 NONE, // 关闭模糊。 COMPONENT_ULTRA_THIN, //组件超轻薄材质模糊。 COMPONENT_THIN, //组件轻薄材质模糊。 COMPONENT_REGULAR,// 组件普通材质模糊。 COMPONENT_THICK, // 组件厚材质模糊。 COMPONENT_ULTRA_THICK, // 组件超厚材质模糊。}

BackgroundBlurStyleOptions继承自BlurOptions，BlurOptions在前文中有介绍，BackgroundBlurStyleOptions定义如下：​​​​​​​

struct BackgroundBlurStyleOptions extends BlurOptions {
  
   params: BackgroundBrightnessOptions;}// BackgroundBrightnessOptions 结构定义如下struct BackgroundBrightnessOptions {
  
   //亮度变化速率。亮度变化速率越大，提亮程度下降速度越快。若rate为0，则lightUpDegree将不生效，即不会产生任何提亮效果。 // 默认值：0.0,取值范围：(0.0, +∞) rate: number,  // 提亮程度。提亮程度越大，亮度提升程度越大。 // 默认值：0.0,取值范围：[-1