1# 模糊 2 3动画效果可以丰富界面的细节，提升UI界面的真实感和品质感。例如，模糊和阴影效果可以让物体看起来更加立体，使得动画更加生动。ArkUI提供了丰富的效果接口，开发者可快速打造出精致、个性化的效果。本章中主要对常用的模糊、阴影和色彩效果等效果接口进行了介绍。 4 5 6模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系。 7 8 9| 接口 | 说明 | 10| ------------------------------------------------------------ | -------------------------------------------- | 11| [backdropBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#backdropblur) | 为当前组件添加背景模糊效果，入参为模糊半径。 | 12| [blur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#blur) | 为当前组件添加内容模糊效果，入参为模糊半径。 | 13| [backgroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backgroundblurstyle9) | 为当前组件添加背景模糊效果，入参为模糊样式。 | 14| [foregroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md#foregroundblurstyle) | 为当前组件添加内容模糊效果，入参为模糊样式。 | 15 16 17## 使用backdropBlur为组件添加背景模糊 18 19 20```ts 21@Entry 22@Component 23struct BlurEffectsExample { 24 build() { 25 Column({ space: 10 }) { 26 Text('backdropblur') 27 .width('90%') 28 .height('90%') 29 .fontSize(20) 30 .fontColor(Color.White) 31 .textAlign(TextAlign.Center) 32 .backdropBlur(10) // 对背景进行模糊 33 .backgroundImage($r('app.media.share')) 34 .backgroundImageSize({ width: 400, height: 300 }) 35 } 36 .width('100%') 37 .height('50%') 38 .margin({ top: 20 }) 39 } 40} 41``` 42 43 44 45 46 47 48## 使用blur为组件添加内容模糊 49 50 51```ts 52@Entry 53@Component 54struct Index1 { 55 @State radius: number = 0; 56 @State text: string = ''; 57 @State y: string = '手指不在屏幕上'; 58 59 aboutToAppear() { 60 this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y + 61 "\n" + "当前图片模糊程度为 : " + this.radius; 62 } 63 64 build() { 65 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 66 Text(this.text) 67 .height(200) 68 .fontSize(20) 69 .fontWeight(FontWeight.Bold) 70 .fontFamily("cursive") 71 .fontStyle(FontStyle.Italic) 72 Image($r("app.media.wall")) 73 .blur(this.radius) // 使用blur接口为照片组件添加内容模糊效果 74 .height('100%') 75 .width("100%") 76 .objectFit(ImageFit.Cover) 77 }.height('100%') 78 .width("100%") 79 .onTouch((event?: TouchEvent) => { 80 if(event){ 81 if (event.type === TouchType.Move) { 82 this.y = Number(event.touches[0].y.toString()).toString(); 83 this.radius = Number(this.y) / 10; // 根据跟手过程中的滑动距离修改模糊半径，配合模糊接口，形成跟手模糊效果 84 } 85 if (event.type === TouchType.Up) { 86 this.radius = 0; 87 this.y = '手指离开屏幕'; 88 } 89 } 90 this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y + 91 "\n" + "当前图片模糊程度为 : " + this.radius; 92 }) 93 } 94} 95``` 96 97 98 99 100 101 102## 使用backgroundBlurStyle为组件添加背景模糊效果 103 104 105```ts 106@Entry 107@Component 108struct BackDropBlurStyleDemo { 109 build() { 110 Grid() { 111 GridItem() { 112 Column() { 113 Column() { 114 Text('原图') 115 .fontSize(20) 116 .fontColor(Color.White) 117 .textAlign(TextAlign.Center) 118 .width('100%') 119 .height('100%') 120 } 121 .height(100) 122 .aspectRatio(1) 123 .borderRadius(10) 124 .backgroundImage($r('app.media.share')) 125 126 Text('原图') 127 .fontSize(12) 128 .fontColor(Color.Black) 129 } 130 .height('100%') 131 .justifyContent(FlexAlign.Start) 132 } 133 .width(200) 134 .height(200) 135 136 GridItem() { 137 Column() { 138 Column() { 139 Text('Thin') 140 .fontSize(20) 141 .fontColor(Color.White) 142 .textAlign(TextAlign.Center) 143 .width('100%') 144 .height('100%') 145 } 146 .height(100) 147 .aspectRatio(1) 148 .borderRadius(10) 149 .backgroundImage($r('app.media.share')) 150 // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 151 // ThemeColorMode.LIGHT: 固定使用浅色模式效果 152 // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 153 // scale: 背景材质模糊效果程度，默认值是1 154 .backgroundBlurStyle(BlurStyle.Thin, { 155 colorMode: ThemeColorMode.LIGHT, 156 adaptiveColor: AdaptiveColor.DEFAULT, 157 scale: 0.1 158 }) 159 160 Text('Thin') 161 .fontSize(12) 162 .fontColor(Color.Black) 163 } 164 .height('100%') 165 .justifyContent(FlexAlign.Start) 166 } 167 .width(200) 168 .height(200) 169 170 GridItem() { 171 Column() { 172 Column() { 173 Text('Regular') 174 .fontSize(20) 175 .fontColor(Color.White) 176 .textAlign(TextAlign.Center) 177 .width('100%') 178 .height('100%') 179 } 180 .height(100) 181 .aspectRatio(1) 182 .borderRadius(10) 183 .backgroundImage($r('app.media.share')) 184 .backgroundBlurStyle(BlurStyle.Regular, { 185 colorMode: ThemeColorMode.LIGHT, 186 adaptiveColor: AdaptiveColor.DEFAULT, 187 scale: 0.1 188 }) 189 190 Text('Regular') 191 .fontSize(12) 192 .fontColor(Color.Black) 193 } 194 .height('100%') 195 .justifyContent(FlexAlign.Start) 196 } 197 .width(200) 198 .height(200) 199 200 GridItem() { 201 Column() { 202 Column() { 203 Text('Thick') 204 .fontSize(20) 205 .fontColor(Color.White) 206 .textAlign(TextAlign.Center) 207 .width('100%') 208 .height('100%') 209 } 210 .height(100) 211 .aspectRatio(1) 212 .borderRadius(10) 213 .backgroundImage($r('app.media.share')) 214 .backgroundBlurStyle(BlurStyle.Thick, { 215 colorMode: ThemeColorMode.LIGHT, 216 adaptiveColor: AdaptiveColor.DEFAULT, 217 scale: 0.1 218 }) 219 220 Text('Thick') 221 .fontSize(12) 222 .fontColor(Color.Black) 223 } 224 .height('100%') 225 .justifyContent(FlexAlign.Start) 226 } 227 .width(200) 228 .height(200) 229 230 GridItem() { 231 Column() { 232 Column() { 233 Text('BACKGROUND_THIN') 234 .fontSize(12) 235 .fontColor(Color.White) 236 .textAlign(TextAlign.Center) 237 .width('100%') 238 .height('100%') 239 } 240 .height(100) 241 .aspectRatio(1) 242 .borderRadius(10) 243 .backgroundImage($r('app.media.share')) 244 .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, { 245 colorMode: ThemeColorMode.LIGHT, 246 adaptiveColor: AdaptiveColor.DEFAULT, 247 scale: 0.1 248 }) 249 250 Text('BACKGROUND_THIN') 251 .fontSize(12) 252 .fontColor(Color.Black) 253 } 254 .height('100%') 255 .justifyContent(FlexAlign.Start) 256 } 257 .width(200) 258 .height(200) 259 260 GridItem() { 261 Column() { 262 Column() { 263 Text('BACKGROUND_REGULAR') 264 .fontSize(12) 265 .fontColor(Color.White) 266 .textAlign(TextAlign.Center) 267 .width('100%') 268 .height('100%') 269 } 270 .height(100) 271 .aspectRatio(1) 272 .borderRadius(10) 273 .backgroundImage($r('app.media.share')) 274 .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { 275 colorMode: ThemeColorMode.LIGHT, 276 adaptiveColor: AdaptiveColor.DEFAULT, 277 scale: 0.1 278 }) 279 280 Text('BACKGROUND_REGULAR') 281 .fontSize(12) 282 .fontColor(Color.Black) 283 } 284 .height('100%') 285 .justifyContent(FlexAlign.Start) 286 } 287 .width(200) 288 .height(200) 289 290 GridItem() { 291 Column() { 292 Column() { 293 Text('BACKGROUND_THICK') 294 .fontSize(12) 295 .fontColor(Color.White) 296 .textAlign(TextAlign.Center) 297 .width('100%') 298 .height('100%') 299 } 300 .height(100) 301 .aspectRatio(1) 302 .borderRadius(10) 303 .backgroundImage($r('app.media.share')) 304 .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, { 305 colorMode: ThemeColorMode.LIGHT, 306 adaptiveColor: AdaptiveColor.DEFAULT, 307 scale: 0.1 308 }) 309 310 Text('BACKGROUND_THICK') 311 .fontSize(12) 312 .fontColor(Color.Black) 313 } 314 .height('100%') 315 .justifyContent(FlexAlign.Start) 316 } 317 .width(200) 318 .height(200) 319 320 GridItem() { 321 Column() { 322 Column() { 323 Text('BACKGROUND_ULTRA_THICK') 324 .fontSize(12) 325 .fontColor(Color.White) 326 .textAlign(TextAlign.Center) 327 .width('100%') 328 .height('100%') 329 } 330 .height(100) 331 .aspectRatio(1) 332 .borderRadius(10) 333 .backgroundImage($r('app.media.share')) 334 .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { 335 colorMode: ThemeColorMode.LIGHT, 336 adaptiveColor: AdaptiveColor.DEFAULT, 337 scale: 0.1 338 }) 339 340 Text('BACKGROUND_ULTRA_THICK') 341 .fontSize(12) 342 .fontColor(Color.Black) 343 } 344 .height('100%') 345 .justifyContent(FlexAlign.Start) 346 } 347 .width(200) 348 .height(200) 349 } 350 .columnsTemplate('1fr 1fr') 351 .rowsTemplate('1fr 1fr 1fr 1fr') 352 .width('100%') 353 .height('100%') 354 .margin({ top: 40 }) 355 } 356} 357``` 358 359 360 361 362 363 364 365## 使用foregroundBlurStyle为组件添加内容模糊效果 366 367 368```ts 369@Entry 370@Component 371struct ForegroundBlurStyleDemo { 372 build() { 373 Grid() { 374 GridItem() { 375 Column() { 376 Column() { 377 Text('原图') 378 .fontSize(20) 379 .fontColor(Color.White) 380 .textAlign(TextAlign.Center) 381 .width('100%') 382 .height('100%') 383 } 384 .height(100) 385 .aspectRatio(1) 386 .borderRadius(10) 387 .backgroundImage($r('app.media.share')) 388 389 Text('原图') 390 .fontSize(12) 391 .fontColor(Color.Black) 392 } 393 .height('100%') 394 .justifyContent(FlexAlign.Start) 395 } 396 .width(200) 397 .height(200) 398 399 GridItem() { 400 Column() { 401 Column() { 402 Text('Thin') 403 .fontSize(20) 404 .fontColor(Color.White) 405 .textAlign(TextAlign.Center) 406 .width('100%') 407 .height('100%') 408 } 409 .height(100) 410 .aspectRatio(1) 411 .borderRadius(10) 412 .backgroundImage($r('app.media.share')) 413 // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 414 // ThemeColorMode.LIGHT: 固定使用浅色模式效果 415 // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 416 // scale: 背景材质模糊效果程度，默认值是1 417 .foregroundBlurStyle(BlurStyle.Thin, { 418 colorMode: ThemeColorMode.LIGHT, 419 adaptiveColor: AdaptiveColor.DEFAULT, 420 scale: 0.1 421 }) 422 423 Text('Thin') 424 .fontSize(12) 425 .fontColor(Color.Black) 426 } 427 .height('100%') 428 .justifyContent(FlexAlign.Start) 429 } 430 .width(200) 431 .height(200) 432 433 GridItem() { 434 Column() { 435 Column() { 436 Text('Regular') 437 .fontSize(20) 438 .fontColor(Color.White) 439 .textAlign(TextAlign.Center) 440 .width('100%') 441 .height('100%') 442 } 443 .height(100) 444 .aspectRatio(1) 445 .borderRadius(10) 446 .backgroundImage($r('app.media.share')) 447 .foregroundBlurStyle(BlurStyle.Regular, { 448 colorMode: ThemeColorMode.LIGHT, 449 adaptiveColor: AdaptiveColor.DEFAULT, 450 scale: 0.1 451 }) 452 453 Text('Regular') 454 .fontSize(12) 455 .fontColor(Color.Black) 456 } 457 .height('100%') 458 .justifyContent(FlexAlign.Start) 459 } 460 .width(200) 461 .height(200) 462 463 GridItem() { 464 Column() { 465 Column() { 466 Text('Thick') 467 .fontSize(20) 468 .fontColor(Color.White) 469 .textAlign(TextAlign.Center) 470 .width('100%') 471 .height('100%') 472 } 473 .height(100) 474 .aspectRatio(1) 475 .borderRadius(10) 476 .backgroundImage($r('app.media.share')) 477 .foregroundBlurStyle(BlurStyle.Thick, { 478 colorMode: ThemeColorMode.LIGHT, 479 adaptiveColor: AdaptiveColor.DEFAULT, 480 scale: 0.1 481 }) 482 483 Text('Thick') 484 .fontSize(12) 485 .fontColor(Color.Black) 486 } 487 .height('100%') 488 .justifyContent(FlexAlign.Start) 489 } 490 .width(200) 491 .height(200) 492 493 GridItem() { 494 Column() { 495 Column() { 496 Text('BACKGROUND_THIN') 497 .fontSize(12) 498 .fontColor(Color.White) 499 .textAlign(TextAlign.Center) 500 .width('100%') 501 .height('100%') 502 } 503 .height(100) 504 .aspectRatio(1) 505 .borderRadius(10) 506 .backgroundImage($r('app.media.share')) 507 .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, { 508 colorMode: ThemeColorMode.LIGHT, 509 adaptiveColor: AdaptiveColor.DEFAULT, 510 scale: 0.1 511 }) 512 513 Text('BACKGROUND_THIN') 514 .fontSize(12) 515 .fontColor(Color.Black) 516 } 517 .height('100%') 518 .justifyContent(FlexAlign.Start) 519 } 520 .width(200) 521 .height(200) 522 523 GridItem() { 524 Column() { 525 Column() { 526 Text('BACKGROUND_REGULAR') 527 .fontSize(12) 528 .fontColor(Color.White) 529 .textAlign(TextAlign.Center) 530 .width('100%') 531 .height('100%') 532 } 533 .height(100) 534 .aspectRatio(1) 535 .borderRadius(10) 536 .backgroundImage($r('app.media.share')) 537 .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { 538 colorMode: ThemeColorMode.LIGHT, 539 adaptiveColor: AdaptiveColor.DEFAULT, 540 scale: 0.1 541 }) 542 543 Text('BACKGROUND_REGULAR') 544 .fontSize(12) 545 .fontColor(Color.Black) 546 } 547 .height('100%') 548 .justifyContent(FlexAlign.Start) 549 } 550 .width(200) 551 .height(200) 552 553 GridItem() { 554 Column() { 555 Column() { 556 Text('BACKGROUND_THICK') 557 .fontSize(12) 558 .fontColor(Color.White) 559 .textAlign(TextAlign.Center) 560 .width('100%') 561 .height('100%') 562 } 563 .height(100) 564 .aspectRatio(1) 565 .borderRadius(10) 566 .backgroundImage($r('app.media.share')) 567 .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, { 568 colorMode: ThemeColorMode.LIGHT, 569 adaptiveColor: AdaptiveColor.DEFAULT, 570 scale: 0.1 571 }) 572 573 Text('BACKGROUND_THICK') 574 .fontSize(12) 575 .fontColor(Color.Black) 576 } 577 .height('100%') 578 .justifyContent(FlexAlign.Start) 579 } 580 .width(200) 581 .height(200) 582 583 GridItem() { 584 Column() { 585 Column() { 586 Text('BACKGROUND_ULTRA_THICK') 587 .fontSize(12) 588 .fontColor(Color.White) 589 .textAlign(TextAlign.Center) 590 .width('100%') 591 .height('100%') 592 } 593 .height(100) 594 .aspectRatio(1) 595 .borderRadius(10) 596 .backgroundImage($r('app.media.share')) 597 .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { 598 colorMode: ThemeColorMode.LIGHT, 599 adaptiveColor: AdaptiveColor.DEFAULT, 600 scale: 0.1 601 }) 602 603 Text('BACKGROUND_ULTRA_THICK') 604 .fontSize(12) 605 .fontColor(Color.Black) 606 } 607 .height('100%') 608 .justifyContent(FlexAlign.Start) 609 } 610 .width(200) 611 .height(200) 612 } 613 .columnsTemplate('1fr 1fr') 614 .rowsTemplate('1fr 1fr 1fr 1fr') 615 .width('100%') 616 .height('100%') 617 .margin({ top: 40 }) 618 } 619} 620``` 621 622 623 624 625
