1# EffectComponent (系统接口) 2 3特效合并容器组件，用于子节点特效绘制的合并，实现特效的绘制性能优化。 4 5> **说明：** 6> 7> - 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 本模块为系统接口。 10> 11> - 目前该组件仅支持子组件背景模糊效果的绘制合并优化。 12> 13> - 在对子组件的背景模糊特效进行绘制合并时，需要将子组件的backgroundBlurStyle(BlurStyle)属性替换成useEffect(true)。 14 15 16## 子组件 17 18可以包含子组件。 19 20## 接口 21 22### EffectComponent 23 24EffectComponent() 25 26创建特效绘制合并组件，用于对子组件背景模糊特效的绘制合并。 27 28**系统接口：** 此接口为系统接口。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32### EffectComponent<sup>20+</sup> 33 34EffectComponent(options?: EffectComponentOptions) 35 36创建特效绘制合并组件，无参数或者参数为EffectLayer.None时用于对子组件背景模糊特效的绘制合并。有明确参数时表示当前渲染图层置于特殊图层。 37 38**系统接口：** 此接口为系统接口。 39 40**系统能力：** SystemCapability.ArkUI.ArkUI.Full 41 42**参数:** 43 44| 参数名 | 类型 | 必填 | 说明 | 45| -------------- | ---------------------------------------- | ---- | ---------------------------------------- | 46| options | [EffectComponentOptions](#effectcomponentoptions20对象说明) | 否 | EffectComponent构造参数。 | 47 48## 事件 49 50不支持通用事件。 51 52## 属性 53 54支持通用属性，目前仅支持对backgroundBlurStyle属性做绘制合并优化。 55 56## EffectComponentOptions<sup>20+</sup>对象说明 57 58设置当前EffectComponent构造参数，包含EffectComponent的渲染层级。 59 60**系统接口：** 此接口为系统接口。 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64| 名称 | 类型 | 必填 | 说明 | 65| ----------- | --------------------------------------- | ---- | -------------------------------------------------------- | 66| effectLayer | [EffectLayer](#effectlayer20枚举说明) | 否 | EffectComponent的渲染层级。<br/>默认值：EffectLayer.NONE | 67 68## EffectLayer<sup>20+</sup>枚举说明 69 70EffectComponent的渲染层级。 71 72**系统接口：** 此接口为系统接口。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76| 名称 | 值 | 说明 | 77| :------------ | :--- | :----------- | 78| NONE | 0 | 无特效层。 | 79| CHARGE_MOTION | 1 | 充电动画层。 | 80| CHARGE_TEXT | 2 | 充电文字层。 | 81 82## 示例 83 84### 示例1（使用特效绘制合并能力） 85 86该示例主要演示如何使用特效绘制合并组件。 87 88```ts 89//Index.ets 90@Entry 91@Component 92struct Index { 93 build() { 94 Stack() { 95 Image($r("app.media.example")) 96 .autoResize(true) 97 EffectComponent() { 98 Column({ space: 20 }) { 99 // 使用backgroundBlurStyle进行模糊绘制 100 Text("Normal text with backgroundBlurStyle") 101 .textAlign(TextAlign.Center) 102 .fontSize(16) 103 .fontWeight(FontWeight.Medium) 104 .backgroundBlurStyle(BlurStyle.Thick) 105 .borderRadius(16) 106 .width('90%') 107 .height('48') 108 109 // 不进行模糊绘制 110 Text("Normal text without blur effect") 111 .textAlign(TextAlign.Center) 112 .fontSize(16) 113 .fontWeight(FontWeight.Medium) 114 .border({ width: 1 }) 115 .borderRadius(16) 116 .width('90%') 117 .height('48') 118 119 // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数 120 Text("Normal text with useEffect blur 1") 121 .textAlign(TextAlign.Center) 122 .useEffect(true) 123 .fontSize(16) 124 .fontWeight(FontWeight.Medium) 125 .borderRadius(16) 126 .width('90%') 127 .height('48') 128 129 // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数 130 Text("Normal text with useEffect blur 2") 131 .textAlign(TextAlign.Center) 132 .useEffect(true) 133 .fontSize(16) 134 .fontWeight(FontWeight.Medium) 135 .borderRadius(16) 136 .width('90%') 137 .height('48') 138 } 139 .width('100%') 140 } 141 .backgroundBlurStyle(BlurStyle.Thin) 142 } 143 .backgroundColor(Color.Black) 144 .width('100%') 145 .height('100%') 146 } 147} 148``` 149 150 151 152### 示例2（独立渲染图层） 153 154该示例主要演示如何渲染充电文字层。 155 156```ts 157@Entry 158@Component 159struct Index { 160 build() { 161 Stack() { 162 Image($r("app.media.startIcon")) 163 .autoResize(true) 164 EffectComponent({effectLayer: EffectLayer.CHARGE_TEXT}) { 165 Text('CHARGE_TEXT') 166 .height('50%') 167 .width('100%') 168 .fontSize(50) 169 .textAlign(TextAlign.Center); 170 } 171 .backgroundBlurStyle(BlurStyle.Thin) 172 } 173 .backgroundColor(Color.Black) 174 .width('100%') 175 .height('100%') 176 } 177} 178``` 179 180
