提交 7a12e583 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 0f141c13
......@@ -6,8 +6,8 @@
| 隐式动画接口 | 作用域 | 原理 | 使用场景 |
| -------- | -------- | -------- | -------- |
| animateTo | 闭包内改变属性引起的界面变化。<br/>作用于出现消失转场。 | -&nbsp;通用的函数,对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。<br/>-&nbsp;支持多次调用,支持嵌套。 | -&nbsp;适用对多个可动画属性配置相同动画参数的动画。<br/>-&nbsp;需要嵌套使用动画的场景。 |
| animation | 组件通过属性接口绑定的属性变化引起的界面变化。 | -&nbsp;识别组件的可动画属性变化,自动添加动画。<br/>-&nbsp;组件的接口调用是从下往上执行,animation只会作用于在其之上的属性调用。<br/>-&nbsp;组件可以根据调用顺序对多个属性设置不同的animation。 | -&nbsp;适用于对多个可动画属性配置不同参数动画的场景。 |
| animateTo | 闭包内改变属性引起的界面变化。<br/>作用于出现消失转场。 | 通用函数,对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。<br/>支持多次调用,支持嵌套。 | 适用对多个可动画属性配置相同动画参数的动画。<br/>需要嵌套使用动画的场景。 |
| animation | 组件通过属性接口绑定的属性变化引起的界面变化。 | 识别组件的可动画属性变化,自动添加动画。<br/>组件的接口调用是从下往上执行,animation只会作用于在其之上的属性调用。<br/>组件可以根据调用顺序对多个属性设置不同的animation。 | 适用于对多个可动画属性配置不同参数动画的场景。 |
## 使用animateTo产生属性动画
......@@ -17,7 +17,7 @@
animateTo(value: AnimateParam, event: () => void): void
```
[animateTo](../reference/arkui-ts/ts-explicit-animation.md)接口参数中,value指定[动画参数](../reference/arkui-ts/ts-explicit-animation.md#animateparam%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)(包括时长、[曲线](../reference/apis/js-apis-curve.md#ohoscurves-%E6%8F%92%E5%80%BC%E8%AE%A1%E7%AE%97)等)event为动画的闭包函数,闭包内变量改变产生的属性动画将遵循相同的动画参数。
[animateTo](../reference/arkui-ts/ts-explicit-animation.md)接口参数中,value指定[动画参数](../reference/arkui-ts/ts-explicit-animation.md#animateparam对象说明)(包括时长、[曲线](../reference/apis/js-apis-curve.md#curve)等)event为动画的闭包函数,闭包内变量改变产生的属性动画将遵循相同的动画参数。
```ts
......
......@@ -4,12 +4,33 @@
属性接口(以下简称属性)包含尺寸属性、布局属性、位置属性等多种类型,用于控制组件的行为。针对当前界面上的组件,其部分属性(如位置属性)的变化会引起UI的变化。添加动画可以让属性值从起点逐渐变化到终点,从而产生连续的动画效果。根据变化时是否能够添加动画,可以将属性分为可动画属性和不可动画属性。判断一种属性是否适合作为可动画属性主要有两个标准:
- 属性变化能够引起UI的变化。例如,[enabled](../reference/arkui-ts/ts-universal-attributes-enable.md)属性用于控制组件是否可以响应点击、触摸等事件,但enable属性的变化不会引起UI的变化,因此不适合作为可动画属性。
1. 属性变化能够引起UI的变化。例如,[enabled](../reference/arkui-ts/ts-universal-attributes-enable.md)属性用于控制组件是否可以响应点击、触摸等事件,但enable属性的变化不会引起UI的变化,因此不适合作为可动画属性。
- 属性在变化时适合添加动画作为过渡。例如,[focusable](../reference/arkui-ts/ts-universal-attributes-focus.md)属性决定当前组件是否可以获得焦点,当focusable属性发生变化时,应立即切换到终点值以响应用户行为,不应该加入动画效果,因此不适合作为可动画属性。
2. 属性在变化时适合添加动画作为过渡。例如,[focusable](../reference/arkui-ts/ts-universal-attributes-focus.md)属性决定当前组件是否可以获得焦点,当focusable属性发生变化时,应立即切换到终点值以响应用户行为,不应该加入动画效果,因此不适合作为可动画属性。
**属性接口分类说明:**
通常,可动画属性的参数数据类型必须具备连续性,即可以通过插值方法来填补数据点之间的空隙,达到视觉上的连续效果。但属性的参数数据类型是否能够进行插值并非决定属性是否可动画的关键因素。例如,对于设置元素水平方向布局的[direction](../reference/arkui-ts/ts-universal-attributes-location.md#%E4%BD%8D%E7%BD%AE%E8%AE%BE%E7%BD%AE)属性,其参数数据类型是枚举值。但是,由于位置属性是可动画属性,ArkUI同样支持在其属性值改变引起组件位置变化时添加动画。
- 可动画属性:
- 系统可动画属性:
| 分类 | 说明 |
| -------- | ---------------------------------------------- |
| 布局属性 | 位置、大小、内边距、外边距、对齐方式、权重等。 |
| 仿射变换 | 平移、旋转、缩放、锚点等。 |
| 背景 | 背景颜色、背景模糊等。 |
| 内容 | 文字大小、文字颜色,图片对齐方式、模糊等。 |
| 前景 | 前景颜色等。 |
| Overlay | Overlay属性等。 |
| 外观 | 透明度、圆角、边框、阴影等。 |
| ... | ... |
- 自定义可动画属性:通过自定义属性动画机制抽象出的可动画属性。
- 不可动画属性:zIndex、focusable等。
通常,可动画属性的参数数据类型必须具备连续性,即可以通过插值方法来填补数据点之间的空隙,达到视觉上的连续效果。但属性的参数数据类型是否能够进行插值并非决定属性是否可动画的关键因素。例如,对于设置元素水平方向布局的[direction](../reference/arkui-ts/ts-universal-attributes-location.md)属性,其参数数据类型是枚举值。但是,由于位置属性是可动画属性,ArkUI同样支持在其属性值改变引起组件位置变化时添加动画。
对于可动画属性,系统不仅提供通用属性,还支持自定义可动画属性。
......@@ -19,18 +40,3 @@
- [自定义可动画属性](../quick-start/arkts-animatable-extend.md):ArkUI提供[@AnimatableExtend](../quick-start/arkts-animatable-extend.md)装饰器用于自定义可动画属性。开发者可从自定义绘制的内容中抽象出可动画属性,用于控制每帧绘制的内容,如自定义绘制音量图标。通过自定义可动画属性,可以为ArkUI中部分原本不支持动画的属性添加动画。
**表1** 属性接口分类表
| 属性 | 分类 | 说明 |
| -------- | -------- | -------- | -------- |
| 可动画属性 | 系统可动画属性 | 布局属性 | 位置、大小、内边距、外边距、对齐方式、权重等。 |
| 仿射变换 | 平移、旋转、缩放、锚点等。 |
| 背景 | 背景颜色、背景模糊等。 |
| 内容 | 文字大小、文字颜色,图片对齐方式、模糊等。 |
| 前景 | 前景颜色等。 |
| Overlay | Overlay属性等。 |
| 外观 | 透明度、圆角、边框、阴影等。 |
| ... | ... |
| 自定义可动画属性 | - | 通过自定义属性动画机制抽象出的可动画属性。 |
| 不可动画属性 | - | zIndex、focusable等。 |
......@@ -48,7 +48,7 @@ struct ComponentDemo {
## 打造组件定制化动效
部分组件支持通过[属性动画](arkts-attribute-animation.md)[转场动画](arkts-transition.md)自定义组件子Item的动效,实现定制化动画效果。例如,[Scorll](../reference/arkui-ts/ts-container-scroll.md)组件中可对各个子组件在滑动时的动画效果进行定制。
部分组件支持通过[属性动画](arkts-attribute-animation-overview.md)[转场动画](arkts-transition-overview.md)自定义组件子Item的动效,实现定制化动画效果。例如,[Scorll](../reference/arkui-ts/ts-container-scroll.md)组件中可对各个子组件在滑动时的动画效果进行定制。
- 在滑动或者点击操作时通过改变各个Scroll子组件的仿射属性来实现各种效果。
......
......@@ -4,7 +4,7 @@
属性动画是可动画属性的参数值发生变化时,引起UI上产生的连续视觉效果。当参数值发生连续变化,且设置到可以引起UI发生变化的属性接口上时,就可以实现属性动画。
ArkUI提供[@AnimatableExtend](../quick-start/arkts-animatable-extend.md)装饰器,用于自定义可动画属性接口。由于参数的数据类型必须具备一定程度的连续性,自定义可动画属性接口的参数类型仅支持number类型和实现[AnimtableArithmetic<T>](../quick-start/arkts-animatable-extend.md#animtablearithmetict%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E)接口的自定义类型。通过自定义可动画属性接口和可动画数据类型,在使用animateTo或animation执行动画时,通过逐帧回调函数修改不可动画属性接口的值,能够让不可动画属性接口实现动画效果。
ArkUI提供[@AnimatableExtend](../quick-start/arkts-animatable-extend.md)装饰器,用于自定义可动画属性接口。由于参数的数据类型必须具备一定程度的连续性,自定义可动画属性接口的参数类型仅支持number类型和实现[AnimtableArithmetic<T>](../quick-start/arkts-animatable-extend.md)接口的自定义类型。通过自定义可动画属性接口和可动画数据类型,在使用animateTo或animation执行动画时,通过逐帧回调函数修改不可动画属性接口的值,能够让不可动画属性接口实现动画效果。
## 使用number数据类型和\@AnimatableExtend装饰器改变字体大小
......
# 出现/消失转场
[transition](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)是基础的组件转场接口,用于实现一个组件出现或者消失时的动画效果。可以通过[TransitionEffect](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)的组合使用,定义出各式效果。
[transition](../reference/arkui-ts/ts-transition-animation-component.md)是基础的组件转场接口,用于实现一个组件出现或者消失时的动画效果。可以通过[TransitionEffect](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10对象说明)的组合使用,定义出各式效果。
**表1** 转场效果接口
......
......@@ -8,8 +8,8 @@
| 接口 | 说明 | 使用场景 |
| -------- | -------- | -------- |
| [bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA) | 弹出全屏的模态组件。 | 用于自定义全屏的模态展示界面,结合转场动画和共享元素动画可实现复杂转场动画效果,如缩略图片点击后查看大图。 |
| [bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md#%E5%8D%8A%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA) | 弹出半模态组件。 | 用于半模态展示界面,如分享框。 |
| [bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md) | 弹出全屏的模态组件。 | 用于自定义全屏的模态展示界面,结合转场动画和共享元素动画可实现复杂转场动画效果,如缩略图片点击后查看大图。 |
| [bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md) | 弹出半模态组件。 | 用于半模态展示界面,如分享框。 |
| [bindMenu](../reference/arkui-ts/ts-universal-attributes-menu.md) | 弹出菜单,点击组件后弹出。 | 需要Menu菜单的场景,如一般应用的“+”号键。 |
| [bindContextMenu](../reference/arkui-ts/ts-universal-attributes-menu.md) | 弹出菜单,长按或者右键点击后弹出。 | 长按浮起效果,一般结合拖拽框架使用,如桌面图标长按浮起。 |
| [bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md) | 弹出Popup弹框。 | Popup弹框场景,如点击后对某个组件进行临时说明。 |
......@@ -18,9 +18,9 @@
## 使用bindContentCover构建全屏模态转场效果
[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)接口用于为组件绑定全屏模态页面,在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。
[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md)接口用于为组件绑定全屏模态页面,在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。
1. 定义全屏模态转场效果[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)
1. 定义全屏模态转场效果[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md)
2. 定义模态展示界面。
......@@ -136,7 +136,7 @@ struct BindContentCoverDemo {
## 使用bindSheet构建半模态转场效果
[bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md#%E5%8D%8A%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)属性可为组件绑定半模态页面,在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。构建半模态转场动效的步骤基本与使用bindContentCover构建全屏模态转场动效相同。
[bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md)属性可为组件绑定半模态页面,在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。构建半模态转场动效的步骤基本与使用bindContentCover构建全屏模态转场动效相同。
完整示例和效果如下。
......
# 阴影
阴影接口[shadow](../reference/arkui-ts/ts-universal-attributes-image-effect.md)可以为当前组件添加阴影效果,该接口支持两种类型参数,开发者可配置[ShadowOptions](../reference/arkui-ts/ts-universal-attributes-image-effect.md#shadowoptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)自定义阴影效果。ShadowOptions模式下,当radius = 0 或者 color 的透明度为0时,无阴影效果。
阴影接口[shadow](../reference/arkui-ts/ts-universal-attributes-image-effect.md)可以为当前组件添加阴影效果,该接口支持两种类型参数,开发者可配置[ShadowOptions](../reference/arkui-ts/ts-universal-attributes-image-effect.md#shadowoptions对象说明)自定义阴影效果。ShadowOptions模式下,当radius = 0 或者 color 的透明度为0时,无阴影效果。
......
......@@ -4,14 +4,14 @@
传统曲线基于数学公式,创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表,通过调整曲线控制点,可以改变曲线形状,从而带来缓入、缓出等动画效果。对于同一条传统曲线,由于不具备物理含义,其形状不会因为用户行为发生任何改变,缺少物理动画的自然感和生动感。建议优先采用物理曲线创建动画,将传统曲线作为辅助用于极少数必要场景中。
ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口,开发者可参照[插值计算](../reference/apis/js-apis-curve.md#ohoscurves-%E6%8F%92%E5%80%BC%E8%AE%A1%E7%AE%97)进行查阅。
ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口,开发者可参照[插值计算](../reference/apis/js-apis-curve.md)进行查阅。
传统曲线的示例和效果如下:
```
```ts
class MyCurve {
public title: string;
public curve: Curve;
......
# 转场动画概述
转场动画是指对将要出现或消失的组件做动画,对始终出现的组件做动画应使用[属性动画](arkts-attribute-animation.md)。转场动画主要为了让开发者从繁重的消失节点管理中解放出来,如果用属性动画做组件转场,开发者需要在动画结束回调中删除组件节点。同时,由于动画结束前已经删除的组件节点可能会重新出现,还需要在结束回调中增加对节点状态的判断。
转场动画是指对将要出现或消失的组件做动画,对始终出现的组件做动画应使用[属性动画](arkts-attribute-animation-overview.md)。转场动画主要为了让开发者从繁重的消失节点管理中解放出来,如果用属性动画做组件转场,开发者需要在动画结束回调中删除组件节点。同时,由于动画结束前已经删除的组件节点可能会重新出现,还需要在结束回调中增加对节点状态的判断。
转场动画分为基础转场和高级模板化转场,有如下几类:
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册