# 模糊 动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。 模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系。 | 接口 | 说明 | | ------------------------------------------------------------ | -------------------------------------------- | | [backdropBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.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) | 为当前组件添加内容模糊效果，入参为模糊样式。 | ## 使用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)