# 模糊 动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。 模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系。 | 接口 | 说明 | | ------------------------------------------------------------ | -------------------------------------------- | | [backdropBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backdropblur) | 为当前组件添加背景模糊效果，入参为模糊半径。 | | [blur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#blur) | 为当前组件添加内容模糊效果，入参为模糊半径。 | | [backgroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backgroundblurstyle9) | 为当前组件添加背景模糊效果，入参为模糊样式。 | | [foregroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md#foregroundblurstyle) | 为当前组件添加内容模糊效果，入参为模糊样式。 | | [motionBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-motionBlur.md#motionblur) | 为当前组件添加由缩放大小或位移变化引起的运动过程中的动态模糊效果，入参为模糊半径和锚点坐标。 | > **说明：** > > 以上接口是实时模糊接口，会每帧进行实时渲染，性能负载较高。当模糊内容和模糊半径都不需要变化时，建议使用静态模糊接口[blur](../reference/apis-arkgraphics2d/js-apis-effectKit.md#blur)。 ## 使用backdropBlur为组件添加背景模糊 ```ts @Entry @Component struct BlurEffectsExample { build() { Column({ space: 10 }) { Text('backdropBlur') .width('90%') .height('90%') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .backdropBlur(10)// 对背景进行模糊 .backgroundImage($r('app.media.share')) .backgroundImageSize({ width: 400, height: 300 }) } .width('100%') .height('50%') .margin({ top: 20 }) } } ``` ![zh-cn_image_0000001599812870](figures/zh-cn_image_0000001599812870.png) ## 使用blur为组件添加内容模糊 ```ts @Entry @Component struct 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("app.media.wall")) .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; }) } } ``` ![zh-cn_image_0000001599813588](figures/zh-cn_image_0000001599813588.gif) ## 使用backgroundBlurStyle为组件添加背景模糊效果 ```ts @Entry @Component struct BackDropBlurStyleDemo { build() { Grid() { GridItem() { Column() { Column() { Text('原图') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) Text('原图') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thin') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 // ThemeColorMode.LIGHT: 固定使用浅色模式效果 // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 // scale: 背景材质模糊效果程度，默认值是1 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thin') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Regular') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Regular') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thick') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.Thick, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thick') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) } .columnsTemplate('1fr 1fr') .rowsTemplate('1fr 1fr 1fr 1fr') .width('100%') .height('100%') .margin({ top: 40 }) } } ``` ![zh-cn_image_0000001649455517](figures/zh-cn_image_0000001649455517.png) ## 使用foregroundBlurStyle为组件添加内容模糊效果 ```ts @Entry @Component struct ForegroundBlurStyleDemo { build() { Grid() { GridItem() { Column() { Column() { Text('原图') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) Text('原图') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thin') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 // ThemeColorMode.LIGHT: 固定使用浅色模式效果 // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 // scale: 背景材质模糊效果程度，默认值是1 .foregroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thin') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Regular') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.Regular, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Regular') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('Thick') .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.Thick, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('Thick') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THIN') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_REGULAR') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) GridItem() { Column() { Column() { Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.White) .textAlign(TextAlign.Center) .width('100%') .height('100%') } .height(100) .aspectRatio(1) .borderRadius(10) .backgroundImage($r('app.media.share')) .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 0.1 }) Text('BACKGROUND_ULTRA_THICK') .fontSize(12) .fontColor(Color.Black) } .height('100%') .justifyContent(FlexAlign.Start) } .width(200) .height(200) } .columnsTemplate('1fr 1fr') .rowsTemplate('1fr 1fr 1fr 1fr') .width('100%') .height('100%') .margin({ top: 40 }) } } ``` ![zh-cn_image_0000001599658168](figures/zh-cn_image_0000001599658168.png) ## 使用motionBlur为组件添加运动模糊效果 ```ts import { curves } from '@kit.ArkUI'; @Entry @Component struct motionBlurTest { @State widthSize: number = 400 @State heightSize: number = 320 @State flag: boolean = true @State radius: number = 0 @State x: number = 0 @State y: number = 0 build() { Column() { Column() { Image($r('app.media.testImg')) .width(this.widthSize) .height(this.heightSize) .onClick(() => { this.radius = 5; this.x = 0.5; this.y = 0.5; if (this.flag) { this.widthSize = 100; this.heightSize = 80; } else { this.widthSize = 400; this.heightSize = 320; } this.flag = !this.flag; }) .animation({ duration: 2000, curve: curves.springCurve(10, 1, 228, 30), onFinish: () => { this.radius = 0; } }) .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } }) } }.width('100%').margin({ top: 5 }) } } ``` ![motionBlurTest](figures/motionBlur.gif)