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## useEffect<sup>18+</sup> 44 45useEffect(useEffect: Optional\<boolean>, effectType?: EffectType) 46 47Specifies whether to apply the effect defined by <!--Del-->the parent [EffectComponent](ts-container-effectcomponent-sys.md) or <!--DelEnd-->the window. Compared to [useEffect<sup>14+</sup>](#useeffect), this API supports the **undefined** type for the **useEffect** parameter. 48 49**Atomic service API**: This API can be used in atomic services since API version 18. 50 51**System capability**: SystemCapability.ArkUI.ArkUI.Full 52 53**Parameters** 54 55| Name| Type| Mandatory| Description| 56| -------- | -------- | -------- | -------- | 57| useEffect | Optional\<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**<br>If **useEffect** is set to **undefined**, the previous value is retained.| 58| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | No| 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**| 59 60## EffectType<sup>14+</sup> 61 62Enumerates the types of effect templates. 63 64**Atomic service API**: This API can be used in atomic services since API version 14. 65 66**System capability**: SystemCapability.ArkUI.ArkUI.Full 67 68| Name | Value | Description | 69| -------- | ---- | ---------------------- | 70| DEFAULT | 0 | Uses the effect template defined<!--Del--> by the parent **EffectComponent** or <!--DelEnd-->.| 71| WINDOW_EFFECT | 1 | Uses the effect template defined by the window.| 72 73Effect Template 74 75| Device Type | Fuzzy Radius (Unit: px) | Saturation | Brightness | Color | 76| -------- | ---- | ---------------------- | -------- | -------- | 77| Mobile device | 0 | 0 | 0 | '#ffffffff' | 78| 2-in-1 device: dark mode | 80 | 1.5 | 1.0 | '#e52e3033' | 79| 2-in-1 device: light mode | 80 | 1.9 | 1.0 | '#e5ffffff' | 80| Tablet | 0 | 0 | 0 | '#ffffffff' | 81 82<!--Del--> 83## Example 84 85This example shows how to combine the drawing of special effects, including background blur. 86 87```ts 88//Index.ets 89@Entry 90@Component 91struct Index { 92 @State isUse: boolean = true; 93 94 build() { 95 Stack() { 96 Image($r("app.media.mountain")) 97 .autoResize(true) 98 EffectComponent() { 99 Column({ space: 20 }) { 100 Column() { 101 } 102 .position({ x: 0, y: 0 }) 103 .width(150) 104 .height(800) 105 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 106 107 Column() { 108 } 109 .position({ x: 200, y: 20 }) 110 .width(150) 111 .height(300) 112 .useEffect(this.isUse, EffectType.DEFAULT) 113 114 Column() { 115 } 116 .position({ x: 400, y: 20 }) 117 .width(150) 118 .height(300) 119 .useEffect(this.isUse) 120 } 121 .width('100%') 122 .height('100%') 123 } 124 .backgroundBlurStyle(BlurStyle.Thin) 125 126 Column() { 127 } 128 .position({ x: 600, y: 0 }) 129 .width(150) 130 .height(800) 131 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 132 133 Row() { 134 Button('useEffect') 135 .margin(30) 136 .onClick(() => { 137 this.isUse = !this.isUse; 138 }) 139 } 140 .position({ x: 300, y: 450 }) 141 } 142 .backgroundColor(Color.Black) 143 .width('100%') 144 } 145} 146``` 147 148 149<!--DelEnd--> 150
