未验证 提交 64200b15 编写于 作者: O openharmony_ci 提交者: Gitee

!23687 修改链接+添加readme

Merge pull request !23687 from LiAn/master
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
- [拖拽控制](ts-universal-attributes-drag-drop.md) - [拖拽控制](ts-universal-attributes-drag-drop.md)
- [安全区域](ts-universal-attributes-expand-safe-area.md) - [安全区域](ts-universal-attributes-expand-safe-area.md)
- [特效绘制合并](ts-universal-attributes-use-effect.md) - [特效绘制合并](ts-universal-attributes-use-effect.md)
- [组件内容填充方式](ts-universal-attributes-renderfit.md)
- 手势处理 - 手势处理
- [绑定手势方法](ts-gesture-settings.md) - [绑定手势方法](ts-gesture-settings.md)
- 基础手势 - 基础手势
......
# 属性动画 # 属性动画
组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画,内容都是直接到终点状态,例如文字、canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用[renderFit](ts-universal_attributes-renderfit.md)属性配置。 组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。布局类改变宽高的动画,内容都是直接到终点状态,例如文字、canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用[renderFit](ts-universal-attributes-renderfit.md)属性配置。
> **说明:** > **说明:**
> >
...@@ -13,7 +13,7 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC ...@@ -13,7 +13,7 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC
**参数:** **参数:**
| 名称 | 参数类型 | 必填 | 描述 | | 名称 | 参数类型 | 必填 | 描述 |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | | ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| duration | number | 否 | 设置动画时长。<br/>默认值:1000<br/>单位:毫秒<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒。<br/>-&nbsp;设置小于0的值时按0处理。<br/>-&nbsp;设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 | | duration | number | 否 | 设置动画时长。<br/>默认值:1000<br/>单位:毫秒<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒。<br/>-&nbsp;设置小于0的值时按0处理。<br/>-&nbsp;设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
| tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。<br/>值为0时,表示不存在动画。<br/>默认值:1<br/>**说明:** <br/>当设置小于0的值时按值为1处理。 | | tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢。<br/>值为0时,表示不存在动画。<br/>默认值:1<br/>**说明:** <br/>当设置小于0的值时按值为1处理。 |
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)<sup>9+</sup> | 否 | 设置动画曲线。<br/>默认值:Curve.EaseInOut<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)<sup>9+</sup> | 否 | 设置动画曲线。<br/>默认值:Curve.EaseInOut<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......
# 显式动画 # 显式动画
提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态,例如文字、canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用[renderFit](ts-universal_attributes-renderfit.md)属性配置。 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态,例如文字、canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用[renderFit](ts-universal-attributes-renderfit.md)属性配置。
> **说明:** > **说明:**
> >
...@@ -15,14 +15,14 @@ animateTo(value: AnimateParam, event: () => void): void ...@@ -15,14 +15,14 @@ animateTo(value: AnimateParam, event: () => void): void
从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 9开始,该接口支持在ArkTS卡片中使用。
| 参数 | 类型 | 是否必填 | 描述 | | 参数 | 类型 | 是否必填 | 描述 |
| ---------------- | ------------ | -------------------- | -------------------- | | ----- | --------------------------------- | ---- | ------------------------------------- |
| value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 | | value | [AnimateParam](#animateparam对象说明) | 是 | 设置动画效果相关参数。 |
| event | () => void | 是 | 指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 | | event | () => void | 是 | 指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
## AnimateParam对象说明 ## AnimateParam对象说明
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ---------- | ---------------------------------------- | ---------------------------------------- |
| duration | number | 动画持续时间,单位为毫秒。<br/>默认值:1000<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒,若超出则固定为1000毫秒。<br/>-&nbsp;设置小于0的值时按0处理。<br/>-&nbsp;设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 | | duration | number | 动画持续时间,单位为毫秒。<br/>默认值:1000<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒,若超出则固定为1000毫秒。<br/>-&nbsp;设置小于0的值时按0处理。<br/>-&nbsp;设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
| tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。<br/>默认值:1.0<br/>**说明:** <br/>当设置小于0的值时按值为1处理。 | | tempo | number | 动画的播放速度,值越大动画播放越快,值越小播放越慢,为0时无动画效果。<br/>默认值:1.0<br/>**说明:** <br/>当设置小于0的值时按值为1处理。 |
| curve | [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)&nbsp;\|&nbsp;string | 动画曲线。<br/>默认值:Curve.EaseInOut<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 | | curve | [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;[ICurve](../apis/js-apis-curve.md#icurve)&nbsp;\|&nbsp;string | 动画曲线。<br/>默认值:Curve.EaseInOut<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......
...@@ -10,13 +10,13 @@ ...@@ -10,13 +10,13 @@
## 属性 ## 属性
| 名称 | 参数类型 | 必填 | 描述 | | 名称 | 参数类型 | 必填 | 描述 |
| -----| ------------------------------------------ | -----| ------------------------------------ | | --------- | --------------------------- | ---- | ---------------------------------------- |
| renderFit | [RenderFit](#renderfit枚举说明) | 是 | 设置宽高动画过程中的组件内容填充方式。<br/>当不设置renderFit属性时,取默认值RenderFit.TOP_LEFT。 | | renderFit | [RenderFit](#renderfit枚举说明) | 是 | 设置宽高动画过程中的组件内容填充方式。<br/>当不设置renderFit属性时,取默认值RenderFit.TOP_LEFT。 |
## RenderFit枚举说明 ## RenderFit枚举说明
| 名称 | 描述 | 示意图 | | 名称 | 描述 | 示意图 |
| ------- | ------------------------------------ | --------------------------------- | | --------------------------- | ---------------------------------------- | ---------------------------------------- |
| CENTER | 保持动画终态的内容大小,并且内容始终与组件保持中心对齐。 | ![renderfit_center](figures/renderfit_center.png) | | CENTER | 保持动画终态的内容大小,并且内容始终与组件保持中心对齐。 | ![renderfit_center](figures/renderfit_center.png) |
| TOP | 保持动画终态的内容大小,并且内容始终与组件保持顶部中心对齐。 | ![renderfit_top](figures/renderfit_top.png) | | TOP | 保持动画终态的内容大小,并且内容始终与组件保持顶部中心对齐。 | ![renderfit_top](figures/renderfit_top.png) |
| BOTTOM | 保持动画终态的内容大小,并且内容始终与组件保持底部中心对齐。 | ![renderfit_bottom](figures/renderfit_bottom.png) | | BOTTOM | 保持动画终态的内容大小,并且内容始终与组件保持底部中心对齐。 | ![renderfit_bottom](figures/renderfit_bottom.png) |
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
| RESIZE_CONTAIN_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大,使内容完整显示在组件内。当组件宽方向有剩余时,内容与组件保持右侧对齐,当组件高方向有剩余时,内容与组件保持底部对齐。 | ![renderfit_resize_contain_bottom_right](figures/renderfit_resize_contain_bottom_right.png) | | RESIZE_CONTAIN_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大,使内容完整显示在组件内。当组件宽方向有剩余时,内容与组件保持右侧对齐,当组件高方向有剩余时,内容与组件保持底部对齐。 | ![renderfit_resize_contain_bottom_right](figures/renderfit_resize_contain_bottom_right.png) |
| RESIZE_COVER | 保持动画终态内容的宽高比进行缩小或放大,使内容两边都大于或等于组件两边,且与组件保持中心对齐,显示内容的中间部分。 | ![renderfit_resize_cover](figures/renderfit_resize_cover.png) | | RESIZE_COVER | 保持动画终态内容的宽高比进行缩小或放大,使内容两边都大于或等于组件两边,且与组件保持中心对齐,显示内容的中间部分。 | ![renderfit_resize_cover](figures/renderfit_resize_cover.png) |
| RESIZE_COVER_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持左侧对齐,显示内容的左侧部分。当内容高方向有剩余时,内容与组件保持顶部对齐,显示内容的顶侧部分。 | ![renderfit_resize_cover_top_left](figures/renderfit_resize_cover_top_left.png) | | RESIZE_COVER_TOP_LEFT | 保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持左侧对齐,显示内容的左侧部分。当内容高方向有剩余时,内容与组件保持顶部对齐,显示内容的顶侧部分。 | ![renderfit_resize_cover_top_left](figures/renderfit_resize_cover_top_left.png) |
| RESIZE_COVER_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持右侧对齐,显示内容的右侧部分。当内容高方向有剩余时,内容与组件保持底部对齐,显示内容的底侧部分。| ![renderfit_resize_cover_bottom_right](figures/renderfit_resize_cover_bottom_right.png) | | RESIZE_COVER_BOTTOM_RIGHT | 保持动画终态内容的宽高比进行缩小或放大,使内容的两边都恰好大于或等于组件两边。当内容宽方向有剩余时,内容与组件保持右侧对齐,显示内容的右侧部分。当内容高方向有剩余时,内容与组件保持底部对齐,显示内容的底侧部分。 | ![renderfit_resize_cover_bottom_right](figures/renderfit_resize_cover_bottom_right.png) |
> **说明:** > **说明:**
> >
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册