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 187881a92ce1c274d5018b8f133ca193b41c897e..494e6bc3c7a86e0c49c8162e23abc67895071e52 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/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) diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/clickeffect.gif b/zh-cn/application-dev/reference/arkui-ts/figures/clickeffect.gif new file mode 100644 index 0000000000000000000000000000000000000000..23e3badd67fa6db5f1ca5676df81bc145e2ebdfb Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/clickeffect.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index e7cb79f244a7cd8dbe8b042196cacb07290d6aad..694fd314a6a83aadad95aa532c6cd7a4ff15ef4f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -540,3 +540,12 @@ | BOTTOM | 窗口的下边缘 | | START | 窗口的左边缘 | | END | 窗口的右边缘 | + +## ClickEffectLevel10+ + +| 名称 | 描述 | 动效参数 | 默认缩放比 | +| ------ | --------------------------------- | --------------------------------- | --------------------------------- | +| LIGHT | 小面积（轻盈） | 弹簧动效， 刚性：410，阻尼：38，初始速度：1 | 90% | +| MIDDLE | 中面积（稳定） | 弹簧动效， 刚性：350，阻尼：35，初始速度：0.5 | 95% | +| HEAVY | 大面积（厚重） | 弹簧动效， 刚性：240，阻尼：28，初始速度：0 | 95% | + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click-effect.md new file mode 100755 index 0000000000000000000000000000000000000000..47ca0cef381b50ccb66e7c6a07e6572878e27cac --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click-effect.md @@ -0,0 +1,95 @@ +# 点击回弹效果 + +设置组件点击时回弹效果。 + +> **说明：** +> +> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +### 属性 + +| 名称 | 参数类型 | 描述 | +| ----------- | ------------------- | ------------------------------------------------------------ | +| clickEffect | [ClickEffect](#clickeffect对象说明) \| null | 设置当前组件点击回弹效果。
**说明：**
可通过null取消点击回弹效果。 | + +### ClickEffect对象说明 + +| 名称 | 参数类型 | 必填 | 描述 | +| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | +| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | 是 | 设置当前组件点击回弹效果。
默认值：ClickEffectLevel.LIGHT | +| scale | number | 否 | 回弹缩放比例，支持在设置ClickEffectLevel的基础上微调回弹缩放比例。
**说明：**
level等于ClickEffectLevel.LIGHT时，默认值：0.90
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