未验证 提交 9b8bc8fc 编写于 作者: D duangavin123 提交者: Gitee

update zh-cn/third-party-cases/property-animation.md.

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 4aa035ee
# 属性动画
## 场景介绍
在日常开发过程中,通常会出现因为状态变化导致组件属性值发生变化,
如:数字键盘按键时,对应数字按钮背景色加深,呈现被点击效果;放开按键时,呈现取消选中效果,
如:手机UI中图标按下时,图标出现弹性缩放效果,
如:在做数据统计时,随着数据值的变化,统计曲线随之变化等动画效果,
在日常开发过程中,通常会出现因为状态变化导致组件属性值发生变化,如:
- 数字键盘按键时,对应数字按钮背景色加深,呈现被点击效果;放开按键时,呈现取消选中效果,
- UI中图标按下时,图标出现弹性缩放效果,
- 在做数据统计时,随着数据值的变化,统计曲线随之变化等动画效果,
本例将为大家介绍下如何通过属性动画实现上述场景。
## 效果呈现
......@@ -14,7 +14,7 @@
|------------|-----------------------|
| 场景1:属性动画 | ![属性动画](figures/attribute_animation.gif) |
| 场景2:弹性动态 | ![弹性动态](figures/Elastic_animation.gif) |
| 场景3:时间曲线 | ![时间曲线](figures/time_curve.gif) |
| 场景3:曲线动画 | ![时间曲线](figures/time_curve.gif) |
## 运行环境
本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发
......@@ -34,7 +34,7 @@
* 当按钮放开时,加载属性动画:按钮取消选中效果。
### 开发步骤
针对实现思路中所提到的内容,具体关键开发步骤如下:
1. 通过Column、Grid、button、Text等关键组件以及visibility属性搭建UI框架,以及渲染数字按钮。
1. 通过Column、Grid、button、Text等关键组件以及visibility属性搭建UI框架,以及渲染数字按钮。
具体代码如下:
```ts
......@@ -179,8 +179,8 @@ struct Index {
* 当按下Image组件时,更新组件的状态为true。
* 当放开Image组件时,更新组件的状态为false。
* 动画播放:使用属性动画绘制Image组件不同状态下的曲线动画。
* 组件按下,触发第一阶段缩小动效,370ms内缩小控件0.8倍
* 组件放开,触发第二阶段放大动效,370ms控件从当前值恢复到正常大小
* 组件按下,触发第一阶段缩小动效,370ms内将组件横纵尺寸均缩小到原尺寸的80%
* 组件放开,触发第二阶段放大动效,在370ms内将控件从当前尺寸恢复到原尺寸
### 开发步骤
针对实现思路中所提到的内容,具体关键开发步骤如下:
1. 先通过List、ListItem、Image等组件将控件表描绘出来。
......@@ -284,9 +284,9 @@ struct Index {
}
```
## 场景3:时间曲线
时间曲线主要是在相同的周期内,使用不同的曲线属性,呈现出不同的动画。
ArkUI中,时间曲线有两种使用方式,一种是Curve类型的枚举,一种是ohos.curve导入
## 场景3:曲线动画
曲线动画可以使用不同的曲线属性,呈现出不同的动画。
ArkUI中,曲线动画有两种使用方式,一种是直接使用Curve类型的枚举,一种是导入ohos.curve模块并使用模块内定义的接口/属性
### 实现思路
* 设置自定义变量item,用于存放不同类型的曲线,本案例中主要有以下类型曲线:
......@@ -398,7 +398,7 @@ ArkUI中,时间曲线有两种使用方式,一种是Curve类型的枚举,
})
```
5. 向Text组件添加width属性,根据按钮的状态,在同一周期内,呈现不同效果的时间曲线动画。
5. 向Text组件添加width属性,根据按钮的状态,在同一周期内,呈现不同效果的曲线动画。
具体代码如下:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册