1# 特效绘制合并 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9用于对背景模糊等特效进行绘制合并。 10 11> **说明：** 12> 13> 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15 16## useEffect 17 18useEffect(value: boolean): T 19 20用于对背景模糊等特效进行绘制合并。 21 22**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 23 24**系统能力：** SystemCapability.ArkUI.ArkUI.Full 25 26**参数：** 27 28| 参数名 | 类型 | 必填 | 说明 | 29| -------- | -------- | -------- | -------- | 30| value | boolean | 是 | 控制组件是否继承EffectComponent组件的特效属性参数，从而合并绘制特效。<br/>useEffect为true时子组件继承EffectComponent组件的特效属性参数，为false时子组件不继承EffectComponent组件的特效属性参数。<br/>默认值：false| 31 32**返回值：** 33 34| 类型 | 说明 | 35| -------- | -------- | 36| T | 返回当前组件。 | 37 38## useEffect<sup>14+</sup> 39 40useEffect(useEffect: boolean, effectType: EffectType): T 41 42用于设置组件是否应用<!--Del-->父级[EffectComponent](ts-container-effectcomponent-sys.md)或<!--DelEnd-->窗口定义的效果模板。 43 44**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48**参数：** 49 50| 参数名 | 类型 | 必填 | 说明 | 51| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 52| useEffect | boolean | 是 | 控制组件是否应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>useEffect为true时表示应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：false | 53| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | 是 | 设置组件应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：EffectType.DEFAULT | 54 55**返回值：** 56 57| 类型 | 说明 | 58| -------- | -------- | 59| T | 返回当前组件。 | 60 61## useEffect<sup>18+</sup> 62 63useEffect(useEffect: Optional\<boolean>, effectType?: EffectType): T 64 65用于设置组件是否应用<!--Del-->父级[EffectComponent](ts-container-effectcomponent-sys.md)或<!--DelEnd-->窗口定义的效果模板。与[useEffect<sup>14+</sup>](#useeffect)相比，useEffect参数新增了对undefined类型的支持。 66 67**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| -------- | -------- | -------- | -------- | 75| useEffect | Optional\<boolean> | 是 | 控制组件是否应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>useEffect为true时表示应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：false<br/>当useEffect的值为undefined时，维持之前取值。 | 76| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | 否 | 设置组件应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：EffectType.DEFAULT| 77 78**返回值：** 79 80| 类型 | 说明 | 81| -------- | -------- | 82| T | 返回当前组件。 | 83 84## EffectType<sup>14+</sup> 85 86使用效果模板种类的枚举值。 87 88**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92| 名称 | 值 | 说明 | 93| -------- | ---- | ---------------------- | 94| DEFAULT | 0 | 使用<!--Del-->父级EffectComponent定义的<!--DelEnd-->效果模板进行定义。 | 95| WINDOW_EFFECT | 1 | 使用窗口定义的效果模板进行定义。 | 96 97效果模板 98 99| 设备类型 | 模糊半径(单位: px) | 饱和度 | 亮度 | 颜色 | 100| -------- | ---- | ---------------------- | -------- | -------- | 101| 移动设备 | 0 | 0 | 0 | '#ffffffff' 102| 2in1设备：深色模式 | 80 | 1.5 | 1.0 | '#e52e3033' 103| 2in1设备：浅色模式 | 80 | 1.9 | 1.0 | '#e5ffffff' 104| Tablet设备 | 0 | 0 | 0 | '#ffffffff' 105 106<!--Del--> 107## 示例 108 109该示例主要通过背景模糊等特效进行绘制合并效果。 110 111<!--code_no_check--> 112 113```ts 114//Index.ets 115@Entry 116@Component 117struct Index { 118 @State isUse: boolean = true; 119 120 build() { 121 Stack() { 122 Image($r("app.media.mountain")) 123 .autoResize(true) 124 EffectComponent() { 125 Column({ space: 20 }) { 126 Column() { 127 } 128 .position({ x: 0, y: 0 }) 129 .width(150) 130 .height(800) 131 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 132 133 Column() { 134 } 135 .position({ x: 200, y: 20 }) 136 .width(150) 137 .height(300) 138 .useEffect(this.isUse, EffectType.DEFAULT) 139 140 Column() { 141 } 142 .position({ x: 400, y: 20 }) 143 .width(150) 144 .height(300) 145 .useEffect(this.isUse) 146 } 147 .width('100%') 148 .height('100%') 149 } 150 .backgroundBlurStyle(BlurStyle.Thin) 151 152 Column() { 153 } 154 .position({ x: 600, y: 0 }) 155 .width(150) 156 .height(800) 157 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 158 159 Row() { 160 Button('useEffect') 161 .margin(30) 162 .onClick(() => { 163 this.isUse = !this.isUse; 164 }) 165 } 166 .position({ x: 300, y: 450 }) 167 } 168 .backgroundColor(Color.Black) 169 .width('100%') 170 } 171} 172``` 173 174 175<!--DelEnd-->
