1# Special Effect Drawing Combination
2
3The **useEffect** attribute is used to combine the drawing of special effects, such as background blur.
4
5> **NOTE**
6>
7> This attribute is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8>
9
10## useEffect
11
12useEffect(value: boolean)
13
14Specifies whether to combine the drawing of special effects, such as background blur.
15
16**Atomic service API**: This API can be used in atomic services since API version 12.
17
18**System capability**: SystemCapability.ArkUI.ArkUI.Full
19
20**Parameters**
21
22| Name| Type| Mandatory| Description|
23| -------- | -------- | -------- | -------- |
24| value | boolean | Yes| Whether the component inherits the special effect settings of the **EffectComponent** component.<br>The value **true** means that the component inherits the special effect settings of the **EffectComponent** component, and **false** means the opposite.<br>Default value: **false**|
25
26## useEffect<sup>14+</sup>
27
28useEffect(useEffect: boolean, effectType: EffectType)
29
30Specifies whether to apply the effect defined by <!--Del-->the parent [EffectComponent](ts-container-effectcomponent-sys.md) or <!--DelEnd-->the window.
31
32**Atomic service API**: This API can be used in atomic services since API version 14.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36**Parameters**
37
38| Name    | Type                                                        | Mandatory| Description                                                        |
39| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
40| useEffect  | boolean                                                      | Yes  | Whether to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>The value **true** means to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **false**|
41| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | Yes  | Type of effect to apply to the component, which is defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **EffectType.DEFAULT**|
42
43## EffectType<sup>14+</sup>
44
45Enumerates the types of effect templates.
46
47**Atomic service API**: This API can be used in atomic services since API version 14.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51| Name    | Value  | Description                  |
52| -------- | ---- | ---------------------- |
53| DEFAULT  | 0   | Uses the effect template defined<!--Del--> by the parent **EffectComponent** or <!--DelEnd-->.|
54| WINDOW_EFFECT  | 1   | Uses the effect template defined by the window.|
55
56Effect Template
57
58|  Device Type   | Fuzzy Radius (Unit: px)  | Saturation                |  Brightness |  Color |
59| -------- | ---- | ---------------------- | -------- | -------- |
60| Mobile device | 0   | 0 | 0 | '#ffffffff' |
61| 2-in-1 device: dark mode | 80   | 1.5 | 1.0 | '#e52e3033' |
62| 2-in-1 device: light mode | 80   | 1.9 | 1.0 | '#e5ffffff' |
63| Tablet | 0   | 0 | 0 | '#ffffffff' |
64
65<!--Del-->
66## Example
67
68This example shows how to combine the drawing of special effects, including background blur.
69
70```ts
71//Index.ets
72@Entry
73@Component
74struct Index {
75  @State isUse: boolean = true;
76
77  build() {
78    Stack() {
79      Image($r("app.media.mountain"))
80        .autoResize(true)
81      EffectComponent() {
82        Column({ space: 20 }) {
83           Column() {
84           }
85           .position({ x: 0, y: 0 })
86           .width(150)
87           .height(800)
88           .useEffect(this.isUse, EffectType.WINDOW_EFFECT)
89
90           Column() {
91           }
92           .position({ x: 200, y: 20 })
93           .width(150)
94           .height(300)
95           .useEffect(this.isUse, EffectType.DEFAULT)
96
97           Column() {
98           }
99           .position({ x: 400, y: 20 })
100           .width(150)
101           .height(300)
102           .useEffect(this.isUse)
103        }
104        .width('100%')
105        .height('100%')
106      }
107      .backgroundBlurStyle(BlurStyle.Thin)
108
109       Column() {
110       }
111        .position({ x: 600, y: 0 })
112        .width(150)
113        .height(800)
114        .useEffect(this.isUse, EffectType.WINDOW_EFFECT)
115
116      Row() {
117        Button('useEffect')
118        .margin(30)
119        .onClick(() => {
120          this.isUse = !this.isUse;
121        })
122      }
123      .position({ x: 300, y: 450 })
124    }
125    .backgroundColor(Color.Black)
126    .width('100%')
127  }
128}
129```
130
131![en-us_image_useeffect_effecttype](figures/en-us_image_useeffect_effecttype.png)
132<!--DelEnd-->
133