!18164 【4.0.8.1版本】【基础能力】新增点击回弹效果通用属性 doc

Merge pull request !18164 from sunjiakun/master

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -46,6 +46,7 @@
     - [图像球面效果](ts-universal-attributes-sphericalEffect.md)
     - [图像渐亮效果](ts-universal-attributes-lightUpEffect.md)
     - [图像边缘像素扩展效果](ts-universal-attributes-pixelStretchEffect.md)
+    - [点击回弹](ts-universal-attributes-click-effect.md)
     - 模态转场设置
       - [全屏模态转场](ts-universal-attributes-modal-transition.md)
       - [半模态转场](ts-universal-attributes-sheet-transition.md)

zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md

@@ -540,3 +540,12 @@
 | BOTTOM | 窗口的下边缘 |
 | START  | 窗口的左边缘 |
 | END    | 窗口的右边缘 |
+
+## ClickEffectLevel<sup>10+<sup>
+
+| 名称   | 描述               | 动效参数                          | 默认缩放比                     |
+| ------ | --------------------------------- | --------------------------------- | --------------------------------- |
+| LIGHT  | 小面积（轻盈） | 弹簧动效， 刚性：410，阻尼：38，初始速度：1 | 90% |
+| MIDDLE | 中面积（稳定） | 弹簧动效， 刚性：350，阻尼：35，初始速度：0.5 | 95% |
+| HEAVY  | 大面积（厚重） | 弹簧动效， 刚性：240，阻尼：28，初始速度：0 | 95% |
+

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click-effect.md

+# 点击回弹效果
+
+设置组件点击时回弹效果。
+
+>  **说明：**
+>
+> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+### 属性
+
+| 名称        | 参数类型            | 描述                                                         |
+| ----------- | ------------------- | ------------------------------------------------------------ |
+| clickEffect | [ClickEffect](#clickeffect对象说明) \| null | 设置当前组件点击回弹效果。<br/>**说明：**<br/>可通过null取消点击回弹效果。 |
+
+### ClickEffect对象说明
+
+| 名称  | 参数类型                                                    | 必填 | 描述                                                         |
+| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | 是   | 设置当前组件点击回弹效果。<br/>默认值：ClickEffectLevel.LIGHT |
+| scale | number                                                      | 否   | 回弹缩放比例，支持在设置ClickEffectLevel的基础上微调回弹缩放比例。<br/>**说明：**<br/>level等于ClickEffectLevel.LIGHT时，默认值：0.90<br/>level等于ClickEffectLevel.MIDDLE或者ClickEffectLevel.HEAVY时，默认值：0.95 |
+
+### 示例
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ToggleExample {
+  build() {
+    Column({ space: 10 }) {
+      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Switch, isOn: false })
+          .clickEffect({level:ClickEffectLevel.LIGHT})
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+
+        Toggle({ type: ToggleType.Switch, isOn: true })
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+      }
+
+      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Checkbox, isOn: false })
+          .clickEffect({level:ClickEffectLevel.MIDDLE})
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+
+        Toggle({ type: ToggleType.Checkbox, isOn: true })
+          .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5})
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+      }
+
+      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Button, isOn: false }) {
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .clickEffect({level:ClickEffectLevel.HEAVY})
+        .selectedColor('rgba(0,125,255,0.20)')
+        .onChange((isOn: boolean) => {
+          console.info('Component status:' + isOn)
+        })
+
+        Toggle({ type: ToggleType.Button, isOn: true }) {
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5})
+        .selectedColor('rgba(0,125,255,0.20)')
+        .onChange((isOn: boolean) => {
+          console.info('Component status:' + isOn)
+        })
+      }
+    }.width('100%').padding(24)
+  }
+}
+```
+
+![clickeffect](figures/clickeffect.gif)
\ No newline at end of file