diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 2d941e9647fad4a5f9a00f625ac8236b7cf9b8cc..7483e00c88d4d0c6dc1f1a0652b71fea1b5aa70a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -52,6 +52,7 @@ - [文本通用](ts-universal-attributes-text-style.md) - [拖拽控制](ts-universal-attributes-drag-drop.md) - [安全区域](ts-universal-attributes-expand-safe-area.md) + - [特效绘制合并](ts-universal-attributes-use-effect.md) - 手势处理 - [绑定手势方法](ts-gesture-settings.md) - 基础手势 @@ -141,6 +142,7 @@ - [TabContent](ts-container-tabcontent.md) - [UIExtensionComponent](ts-container-ui-extension-component.md) - [WaterFlow](ts-container-waterflow.md) + - [EffectComponent](ts-container-effectcomponent.md) - 媒体组件 - [Video](ts-media-components-video.md) - 绘制组件 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_effectcomponent.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_effectcomponent.png new file mode 100644 index 0000000000000000000000000000000000000000..1a9d87ef2d4dee47d7335eb863ca8a0131ae9721 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_effectcomponent.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..5d993f61b1c26fe03657e32c789aae6f3855133b --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md @@ -0,0 +1,99 @@ +# EffectComponent + +特效合并容器组件,用于子节点特效绘制的合并,实现特效的绘制性能优化。 + +> **说明:** +> +> - 该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> - 该组件为系统接口。 +> +> - 目前该组件仅支持子组件背景模糊效果的绘制合并优化。 +> +> - 在对子组件的背景模糊特效进行绘制合并时,需要将子组件的backgroundBlurStyle(BlurStyle)属性替换成useEffect(true)。 + + +## 子组件 + +可以包含子组件。 + + +## 接口 + +EffectComponent() + +创建特效绘制合并组件,用于对子组件背景模糊特效的绘制合并。 + +## 事件 + +不支持通用事件。 + +## 属性 + +支持通用属性,目前仅支持对backgroundBlurStyle属性做绘制合并优化。 + +## 示例 + +```ts +//Index.ets +@Entry +@Component +struct Index { + build() { + Stack() { + Image($r("app.media.example")) + .autoResize(true) + EffectComponent() { + Column({ space: 20 }) { + // 使用backgroundBlurStyle进行模糊绘制 + Text("Normal text with backgroundBlurStyle") + .textAlign(TextAlign.Center) + .fontSize(16) + .fontWeight(FontWeight.Medium) + .backgroundBlurStyle(BlurStyle.Thick) + .borderRadius(16) + .width('90%') + .height('48') + + // 不进行模糊绘制 + Text("Normal text without blur effect") + .textAlign(TextAlign.Center) + .fontSize(16) + .fontWeight(FontWeight.Medium) + .border({ width: 1 }) + .borderRadius(16) + .width('90%') + .height('48') + + // 使用useEffect进行模糊合并绘制,继承EffectComponent的模糊参数 + Text("Normal text with useeffcet blur 1") + .textAlign(TextAlign.Center) + .useEffect(true) + .fontSize(16) + .fontWeight(FontWeight.Medium) + .borderRadius(16) + .width('90%') + .height('48') + + // 使用useEffect进行模糊合并绘制,继承EffectComponent的模糊参数 + Text("Normal text with useeffcet blur 2") + .textAlign(TextAlign.Center) + .useEffect(true) + .fontSize(16) + .fontWeight(FontWeight.Medium) + .borderRadius(16) + .width('90%') + .height('48') + } + .width('100%') + } + .backgroundBlurStyle(BlurStyle.Thin) + } + .backgroundColor(Color.Black) + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_effectcomponent](figures/zh-cn_image_effectcomponent.png) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-use-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-use-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..a46bcbe5a67a0ff77aed5b5eae96c46960bbeb81 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-use-effect.md @@ -0,0 +1,19 @@ +# 特效绘制合并 + +用于对背景模糊等特效进行绘制合并。 + +> **说明:** +> +> 从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 +> +> 该接口为系统接口。 + +## 属性 + +| 名称 | 参数类型 | 参数描述 | +| -------- | -------- | -------- | +| useEffect | bool | 控制组件是否继承EffectComponent组件的特效属性参数,从而合并绘制特效。
useEffect为true时子组件继承EffectComponent组件的特效属性参数。
默认值:false| + +## 示例 + +示例请参考[EffectComponent](ts-container-effectcomponent.md)