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