• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Blur Effect
2
3Animation effects can add detail to your animations and create a sense of realism. For example, blur and shadow effects can lend a 3D look to objects and deliver a more engaging animation experience. ArkUI provides a diverse array of efficient APIs for you to develop exquisite and personalized effects. This topic covers the common blur, shadow, and color effects.
4
5
6Blur effects add a sense of depth and allow for distinction of hierarchical relationship between elements.
7
8
9| API                                                        | Description                                        |
10| ------------------------------------------------------------ | -------------------------------------------- |
11| [backdropBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backdropblur) | Applies a background blur effect to the component. The input parameter is the blur radius.|
12| [blur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-image-effect.md#blur) | Applies a foreground blur effect to the component. The input parameter is the blur radius.|
13| [backgroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md#backgroundblurstyle9) | Applies a background blur effect to the component. The input parameter is the blur style.|
14| [foregroundBlurStyle](../reference/apis-arkui/arkui-ts/ts-universal-attributes-foreground-blur-style.md#foregroundblurstyle) | Applies a foreground blur effect to the component. The input parameter is the blur style.|
15| [motionBlur](../reference/apis-arkui/arkui-ts/ts-universal-attributes-motionBlur.md#motionblur) | Applies a motion blur effect to the component being scaled or moved. The input parameters are the blur radius and anchor point coordinates.|
16
17>  **NOTE**
18>
19>  The preceding APIs provide real-time blurring by rendering each frame, which can be performance-intensive. For static blur effects where content and radius remain unchanged, you are advised to use the static [blur](../reference/apis-arkgraphics2d/js-apis-effectKit.md#blur) API to reduce the load.
20
21## Applying Background Blur with 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) // Apply background blur.
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![en-us_image_0000001599812870](figures/en-us_image_0000001599812870.png)
50
51
52## Applying Foreground Blur with blur
53
54
55```ts
56@Entry
57@Component
58struct Index1 {
59  @State radius: number = 0;
60  @State text: string = '';
61  @State y: string = 'Finger not on the screen';
62
63  aboutToAppear() {
64    this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y +
65    "\n" + "Blur radius:" + 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) // Apply foreground 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; // Modify the blur radius based on the sliding distance.
88        }
89        if (event.type === TouchType.Up) {
90          this.radius = 0;
91          this.y = 'Finger off the screen';
92        }
93      }
94      this.text = "Press a finger on the screen and slide up and down\n" + "Current finger position on the y-axis: " + this.y +
95      "\n" + "Blur radius:" + this.radius;
96    })
97  }
98}
99```
100
101
102
103
104
105## Applying Background Blur with backgroundBlurStyle
106
107
108```ts
109@Entry
110@Component
111struct BackDropBlurStyleDemo {
112  build() {
113    Grid() {
114      GridItem() {
115        Column() {
116          Column() {
117            Text('Original')
118              .fontSize(20)
119              .fontColor(Color.White)
120              .textAlign(TextAlign.Center)
121              .width('100%')
122              .height('100%')
123          }
124          .height(100)
125          .aspectRatio(1)
126          .borderRadius(10)
127          .backgroundImage($r('app.media.share'))
128
129          Text('Original')
130            .fontSize(12)
131            .fontColor(Color.Black)
132        }
133        .height('100%')
134        .justifyContent(FlexAlign.Start)
135      }
136      .width(200)
137      .height(200)
138
139      GridItem() {
140        Column() {
141          Column() {
142            Text('Thin')
143              .fontSize(20)
144              .fontColor(Color.White)
145              .textAlign(TextAlign.Center)
146              .width('100%')
147              .height('100%')
148          }
149          .height(100)
150          .aspectRatio(1)
151          .borderRadius(10)
152          .backgroundImage($r('app.media.share'))
153          // BlurStyle.Thin: Thin blur is applied.
154          // ThemeColorMode.LIGHT: The light color mode is used.
155          // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color.
156          // scale: blurredness of the background material. The default value is 1.
157          .backgroundBlurStyle(BlurStyle.Thin, {
158            colorMode: ThemeColorMode.LIGHT,
159            adaptiveColor: AdaptiveColor.DEFAULT,
160            scale: 0.1
161          })
162
163          Text('Thin')
164            .fontSize(12)
165            .fontColor(Color.Black)
166        }
167        .height('100%')
168        .justifyContent(FlexAlign.Start)
169      }
170      .width(200)
171      .height(200)
172
173      GridItem() {
174        Column() {
175          Column() {
176            Text('Regular')
177              .fontSize(20)
178              .fontColor(Color.White)
179              .textAlign(TextAlign.Center)
180              .width('100%')
181              .height('100%')
182          }
183          .height(100)
184          .aspectRatio(1)
185          .borderRadius(10)
186          .backgroundImage($r('app.media.share'))
187          .backgroundBlurStyle(BlurStyle.Regular, {
188            colorMode: ThemeColorMode.LIGHT,
189            adaptiveColor: AdaptiveColor.DEFAULT,
190            scale: 0.1
191          })
192
193          Text('Regular')
194            .fontSize(12)
195            .fontColor(Color.Black)
196        }
197        .height('100%')
198        .justifyContent(FlexAlign.Start)
199      }
200      .width(200)
201      .height(200)
202
203      GridItem() {
204        Column() {
205          Column() {
206            Text('Thick')
207              .fontSize(20)
208              .fontColor(Color.White)
209              .textAlign(TextAlign.Center)
210              .width('100%')
211              .height('100%')
212          }
213          .height(100)
214          .aspectRatio(1)
215          .borderRadius(10)
216          .backgroundImage($r('app.media.share'))
217          .backgroundBlurStyle(BlurStyle.Thick, {
218            colorMode: ThemeColorMode.LIGHT,
219            adaptiveColor: AdaptiveColor.DEFAULT,
220            scale: 0.1
221          })
222
223          Text('Thick')
224            .fontSize(12)
225            .fontColor(Color.Black)
226        }
227        .height('100%')
228        .justifyContent(FlexAlign.Start)
229      }
230      .width(200)
231      .height(200)
232
233      GridItem() {
234        Column() {
235          Column() {
236            Text('BACKGROUND_THIN')
237              .fontSize(12)
238              .fontColor(Color.White)
239              .textAlign(TextAlign.Center)
240              .width('100%')
241              .height('100%')
242          }
243          .height(100)
244          .aspectRatio(1)
245          .borderRadius(10)
246          .backgroundImage($r('app.media.share'))
247          .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
248            colorMode: ThemeColorMode.LIGHT,
249            adaptiveColor: AdaptiveColor.DEFAULT,
250            scale: 0.1
251          })
252
253          Text('BACKGROUND_THIN')
254            .fontSize(12)
255            .fontColor(Color.Black)
256        }
257        .height('100%')
258        .justifyContent(FlexAlign.Start)
259      }
260      .width(200)
261      .height(200)
262
263      GridItem() {
264        Column() {
265          Column() {
266            Text('BACKGROUND_REGULAR')
267              .fontSize(12)
268              .fontColor(Color.White)
269              .textAlign(TextAlign.Center)
270              .width('100%')
271              .height('100%')
272          }
273          .height(100)
274          .aspectRatio(1)
275          .borderRadius(10)
276          .backgroundImage($r('app.media.share'))
277          .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
278            colorMode: ThemeColorMode.LIGHT,
279            adaptiveColor: AdaptiveColor.DEFAULT,
280            scale: 0.1
281          })
282
283          Text('BACKGROUND_REGULAR')
284            .fontSize(12)
285            .fontColor(Color.Black)
286        }
287        .height('100%')
288        .justifyContent(FlexAlign.Start)
289      }
290      .width(200)
291      .height(200)
292
293      GridItem() {
294        Column() {
295          Column() {
296            Text('BACKGROUND_THICK')
297              .fontSize(12)
298              .fontColor(Color.White)
299              .textAlign(TextAlign.Center)
300              .width('100%')
301              .height('100%')
302          }
303          .height(100)
304          .aspectRatio(1)
305          .borderRadius(10)
306          .backgroundImage($r('app.media.share'))
307          .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
308            colorMode: ThemeColorMode.LIGHT,
309            adaptiveColor: AdaptiveColor.DEFAULT,
310            scale: 0.1
311          })
312
313          Text('BACKGROUND_THICK')
314            .fontSize(12)
315            .fontColor(Color.Black)
316        }
317        .height('100%')
318        .justifyContent(FlexAlign.Start)
319      }
320      .width(200)
321      .height(200)
322
323      GridItem() {
324        Column() {
325          Column() {
326            Text('BACKGROUND_ULTRA_THICK')
327              .fontSize(12)
328              .fontColor(Color.White)
329              .textAlign(TextAlign.Center)
330              .width('100%')
331              .height('100%')
332          }
333          .height(100)
334          .aspectRatio(1)
335          .borderRadius(10)
336          .backgroundImage($r('app.media.share'))
337          .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
338            colorMode: ThemeColorMode.LIGHT,
339            adaptiveColor: AdaptiveColor.DEFAULT,
340            scale: 0.1
341          })
342
343          Text('BACKGROUND_ULTRA_THICK')
344            .fontSize(12)
345            .fontColor(Color.Black)
346        }
347        .height('100%')
348        .justifyContent(FlexAlign.Start)
349      }
350      .width(200)
351      .height(200)
352    }
353    .columnsTemplate('1fr 1fr')
354    .rowsTemplate('1fr 1fr 1fr 1fr')
355    .width('100%')
356    .height('100%')
357    .margin({ top: 40 })
358  }
359}
360```
361
362
363
364![en-us_image_0000001649455517](figures/en-us_image_0000001649455517.png)
365
366
367
368## Applying Foreground Blur with foregroundBlurStyle
369
370
371```ts
372@Entry
373@Component
374struct ForegroundBlurStyleDemo {
375  build() {
376    Grid() {
377      GridItem() {
378        Column() {
379          Column() {
380            Text('Original')
381              .fontSize(20)
382              .fontColor(Color.White)
383              .textAlign(TextAlign.Center)
384              .width('100%')
385              .height('100%')
386          }
387          .height(100)
388          .aspectRatio(1)
389          .borderRadius(10)
390          .backgroundImage($r('app.media.share'))
391
392          Text('Original')
393            .fontSize(12)
394            .fontColor(Color.Black)
395        }
396        .height('100%')
397        .justifyContent(FlexAlign.Start)
398      }
399      .width(200)
400      .height(200)
401
402      GridItem() {
403        Column() {
404          Column() {
405            Text('Thin')
406              .fontSize(20)
407              .fontColor(Color.White)
408              .textAlign(TextAlign.Center)
409              .width('100%')
410              .height('100%')
411          }
412          .height(100)
413          .aspectRatio(1)
414          .borderRadius(10)
415          .backgroundImage($r('app.media.share'))
416          // BlurStyle.Thin: Thin blur is applied.
417          // ThemeColorMode.LIGHT: The light color mode is used.
418          // AdaptiveColor.DEFAULT: Adaptive color mode is not used. The default color is used as the mask color.
419          // scale: blurredness of the background material. The default value is 1.
420          .foregroundBlurStyle(BlurStyle.Thin, {
421            colorMode: ThemeColorMode.LIGHT,
422            adaptiveColor: AdaptiveColor.DEFAULT,
423            scale: 0.1
424          })
425
426          Text('Thin')
427            .fontSize(12)
428            .fontColor(Color.Black)
429        }
430        .height('100%')
431        .justifyContent(FlexAlign.Start)
432      }
433      .width(200)
434      .height(200)
435
436      GridItem() {
437        Column() {
438          Column() {
439            Text('Regular')
440              .fontSize(20)
441              .fontColor(Color.White)
442              .textAlign(TextAlign.Center)
443              .width('100%')
444              .height('100%')
445          }
446          .height(100)
447          .aspectRatio(1)
448          .borderRadius(10)
449          .backgroundImage($r('app.media.share'))
450          .foregroundBlurStyle(BlurStyle.Regular, {
451            colorMode: ThemeColorMode.LIGHT,
452            adaptiveColor: AdaptiveColor.DEFAULT,
453            scale: 0.1
454          })
455
456          Text('Regular')
457            .fontSize(12)
458            .fontColor(Color.Black)
459        }
460        .height('100%')
461        .justifyContent(FlexAlign.Start)
462      }
463      .width(200)
464      .height(200)
465
466      GridItem() {
467        Column() {
468          Column() {
469            Text('Thick')
470              .fontSize(20)
471              .fontColor(Color.White)
472              .textAlign(TextAlign.Center)
473              .width('100%')
474              .height('100%')
475          }
476          .height(100)
477          .aspectRatio(1)
478          .borderRadius(10)
479          .backgroundImage($r('app.media.share'))
480          .foregroundBlurStyle(BlurStyle.Thick, {
481            colorMode: ThemeColorMode.LIGHT,
482            adaptiveColor: AdaptiveColor.DEFAULT,
483            scale: 0.1
484          })
485
486          Text('Thick')
487            .fontSize(12)
488            .fontColor(Color.Black)
489        }
490        .height('100%')
491        .justifyContent(FlexAlign.Start)
492      }
493      .width(200)
494      .height(200)
495
496      GridItem() {
497        Column() {
498          Column() {
499            Text('BACKGROUND_THIN')
500              .fontSize(12)
501              .fontColor(Color.White)
502              .textAlign(TextAlign.Center)
503              .width('100%')
504              .height('100%')
505          }
506          .height(100)
507          .aspectRatio(1)
508          .borderRadius(10)
509          .backgroundImage($r('app.media.share'))
510          .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, {
511            colorMode: ThemeColorMode.LIGHT,
512            adaptiveColor: AdaptiveColor.DEFAULT,
513            scale: 0.1
514          })
515
516          Text('BACKGROUND_THIN')
517            .fontSize(12)
518            .fontColor(Color.Black)
519        }
520        .height('100%')
521        .justifyContent(FlexAlign.Start)
522      }
523      .width(200)
524      .height(200)
525
526      GridItem() {
527        Column() {
528          Column() {
529            Text('BACKGROUND_REGULAR')
530              .fontSize(12)
531              .fontColor(Color.White)
532              .textAlign(TextAlign.Center)
533              .width('100%')
534              .height('100%')
535          }
536          .height(100)
537          .aspectRatio(1)
538          .borderRadius(10)
539          .backgroundImage($r('app.media.share'))
540          .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, {
541            colorMode: ThemeColorMode.LIGHT,
542            adaptiveColor: AdaptiveColor.DEFAULT,
543            scale: 0.1
544          })
545
546          Text('BACKGROUND_REGULAR')
547            .fontSize(12)
548            .fontColor(Color.Black)
549        }
550        .height('100%')
551        .justifyContent(FlexAlign.Start)
552      }
553      .width(200)
554      .height(200)
555
556      GridItem() {
557        Column() {
558          Column() {
559            Text('BACKGROUND_THICK')
560              .fontSize(12)
561              .fontColor(Color.White)
562              .textAlign(TextAlign.Center)
563              .width('100%')
564              .height('100%')
565          }
566          .height(100)
567          .aspectRatio(1)
568          .borderRadius(10)
569          .backgroundImage($r('app.media.share'))
570          .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, {
571            colorMode: ThemeColorMode.LIGHT,
572            adaptiveColor: AdaptiveColor.DEFAULT,
573            scale: 0.1
574          })
575
576          Text('BACKGROUND_THICK')
577            .fontSize(12)
578            .fontColor(Color.Black)
579        }
580        .height('100%')
581        .justifyContent(FlexAlign.Start)
582      }
583      .width(200)
584      .height(200)
585
586      GridItem() {
587        Column() {
588          Column() {
589            Text('BACKGROUND_ULTRA_THICK')
590              .fontSize(12)
591              .fontColor(Color.White)
592              .textAlign(TextAlign.Center)
593              .width('100%')
594              .height('100%')
595          }
596          .height(100)
597          .aspectRatio(1)
598          .borderRadius(10)
599          .backgroundImage($r('app.media.share'))
600          .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, {
601            colorMode: ThemeColorMode.LIGHT,
602            adaptiveColor: AdaptiveColor.DEFAULT,
603            scale: 0.1
604          })
605
606          Text('BACKGROUND_ULTRA_THICK')
607            .fontSize(12)
608            .fontColor(Color.Black)
609        }
610        .height('100%')
611        .justifyContent(FlexAlign.Start)
612      }
613      .width(200)
614      .height(200)
615    }
616    .columnsTemplate('1fr 1fr')
617    .rowsTemplate('1fr 1fr 1fr 1fr')
618    .width('100%')
619    .height('100%')
620    .margin({ top: 40 })
621  }
622}
623```
624
625
626
627![en-us_image_0000001599658168](figures/en-us_image_0000001599658168.png)
628
629
630## Applying Motion Blur with motionBlur
631
632```ts
633import { curves } from '@kit.ArkUI';
634
635@Entry
636@Component
637struct motionBlurTest {
638  @State widthSize: number = 400
639  @State heightSize: number = 320
640  @State flag: boolean = true
641  @State radius: number = 0
642  @State x: number = 0
643  @State y: number = 0
644
645  build() {
646    Column() {
647      Column() {
648        Image($r('app.media.testImg'))
649          .width(this.widthSize)
650          .height(this.heightSize)
651          .onClick(() => {
652            this.radius = 5;
653            this.x = 0.5;
654            this.y = 0.5;
655            if (this.flag) {
656              this.widthSize = 100;
657              this.heightSize = 80;
658            } else {
659              this.widthSize = 400;
660              this.heightSize = 320;
661            }
662            this.flag = !this.flag;
663          })
664          .animation({
665            duration: 2000,
666            curve: curves.springCurve(10, 1, 228, 30),
667            onFinish: () => {
668              this.radius = 0;
669            }
670          })
671          .motionBlur({ radius: this.radius, anchor: { x: this.x, y: this.y } })
672      }
673    }.width('100%').margin({ top: 5 })
674  }
675}
676```
677
678![motionBlurTest](figures/motionBlur.gif)
679