1# 特效绘制合并
2
3用于对背景模糊等特效进行绘制合并。
4
5> **说明：**
6>
7> 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9
10## useEffect
11
12useEffect(value: boolean)
13
14用于对背景模糊等特效进行绘制合并。
15
16**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
17
18**系统能力：** SystemCapability.ArkUI.ArkUI.Full
19
20**参数：**
21
22| 参数名 | 类型 | 必填 | 说明 |
23| -------- | -------- | -------- | -------- |
24| value | boolean | 是 | 控制组件是否继承EffectComponent组件的特效属性参数，从而合并绘制特效。<br/>useEffect为true时子组件继承EffectComponent组件的特效属性参数。<br/>默认值：false|
25
26## useEffect<sup>14+</sup>
27
28useEffect(useEffect: boolean, effectType: EffectType)
29
30用于设置组件是否应用<!--Del-->父级[EffectComponent](ts-container-effectcomponent-sys.md)或<!--DelEnd-->窗口定义的效果模板。
31
32**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。
33
34**系统能力：** SystemCapability.ArkUI.ArkUI.Full
35
36**参数：**
37
38| 参数名 | 类型 | 必填 | 说明 |
39| -------- | -------- | -------- | -------- |
40| useEffect | boolean | 是 | 控制组件是否应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>useEffect为true时表示应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：false|
41| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | 是 | 设置组件应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：EffectType.DEFAULT|
42
43## EffectType<sup>14+</sup>
44
45使用效果模板种类的枚举值。
46
47**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。
48
49**系统能力：**  SystemCapability.ArkUI.ArkUI.Full
50
51| 名称     | 值   | 说明                   |
52| -------- | ---- | ---------------------- |
53| DEFAULT  | 0   | 使用<!--Del-->父级EffectComponent定义的<!--DelEnd-->效果模板进行定义。 |
54| WINDOW_EFFECT  | 1   | 使用窗口定义的效果模板进行定义。 |
55
56效果模板
57
58|  设备类型    | 模糊半径(单位: px)   | 饱和度                 |  亮度  |  颜色  |
59| -------- | ---- | ---------------------- | -------- | -------- |
60| 移动设备  | 0   | 0 | 0 | '#ffffffff'
61| 2in1设备：深色模式  | 80   | 1.5 | 1.0 | '#e52e3033'
62| 2in1设备：浅色模式  | 80   | 1.9 | 1.0 | '#e5ffffff'
63| Tablet设备  | 0   | 0 | 0 | '#ffffffff'
64
65<!--Del-->
66## 示例
67
68该示例主要通过背景模糊等特效进行绘制合并效果。
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![zh_image_useeffect_effecttype](figures/zh_image_useeffect_effecttype.png)
132<!--DelEnd-->