diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/transitionComponent1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/transitionComponent1.gif deleted file mode 100644 index 6b5dd0f0ca7d09218af2641e4ae2900eb394623d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/transitionComponent1.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index 84a25d16953e5a1ddf6933b1296f8896593624c0..c86df084f8de34635d8ee9c2589579452912f041 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -15,7 +15,7 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC | 名称 | 参数类型 | 必填 | 描述 | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | | duration | number | 否 | 设置动画时长。
默认值：1000
单位：毫秒
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
- 在ArkTS卡片上最大动画持续时间为1000毫秒。
- 设置小于1的值时按0处理。
- 设置浮点型类型的值时，向下取整；设置值为1.2，按照1处理。 | -| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。
值为0时，表示不存在动画。
默认值：1
**说明：**
当设置小于1的值时按值为1处理。 | +| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。
值为0时，表示不存在动画。
默认值：1
**说明：**
当设置小于0的值时按值为1处理。 | | curve | string \| [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)9+ | 否 | 设置动画曲线。默认曲线为线性。
默认值：Curve.Linear
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。
默认值：0
取值范围：[0, +∞)
**说明：**
当设置的值小于1时按0处理。设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。 | | iterations | number | 否 | 设置播放次数。
默认值：1
取值范围：[-1, +∞)
**说明：**
设置为-1时表示无限次播放。设置为0时表示无动画效果。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md index ffb525004860b955d732dc28d8afaad40c87e635..80676f32b259e128c75fe67e6de7c11982909734 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -12,25 +12,10 @@ | 名称 | 参数类型 | 参数描述 | | -------- | -------- | -------- | -| transition | TransitionOptions \| TransitionEffect10+ | 设置组件插入显示和删除隐藏的过渡效果。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
详细描述见TransitionOptions和TransitionEffect参数说明。 | +| transition | TransitionOptions(deprecated) \| TransitionEffect10+ | 设置组件插入显示和删除隐藏的过渡效果。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
详细描述见TransitionOptions和TransitionEffect对象说明。 | -## TransitionOptions参数说明 -TransitionOptions通过指定结构体内的参数来指定转场效果。 -| 参数名称 | 参数类型 | 必填 | 参数描述 | -| -------- | -------- | -------- | -------- | -| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 指定该转场样式生效的场景。
默认值：TransitionType.All
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
不指定type时默认为TransitionType.All，即插入删除都生效。 | -| opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。
取值范围： [0, 1]
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
设置小于0或大于1的非法值时，按1处理。 | -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移距离。
-y：纵向的平移距离。
-z：竖向的平移距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：竖向放大倍数（或缩小比例）。
- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为缩放中心点。
- 中心点为(0, 0)代表组件的左上角。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量分量。
-y：纵向的旋转向量分量。
-z：竖向的旋转向量分量。
- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。
- 中心点为(0, 0)代表组件的左上角。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | - -> **说明：** -> -> 1. 当使用TransitionOptions类型的入参指定转场效果时，**必须**配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线、延时跟随animateTo中的配置。 -> 2. 当使用TransitionOptions作为入参，且不指定除type外的任何参数时，此时相当于指定了透明度的转场效果。例如，指定{type: TransitionType.Insert}相当于指定了{type: TransitionType.Insert, opacity: 0}的转场效果。而指定了具体效果时，则不会添加默认的透明度转场效果。 -> 3. 更详细的关于scale、rotate效果的介绍可参考[图形变换](ts-universal-attributes-transformation.md)。 -## TransitionEffect10+参数说明 +## TransitionEffect10+对象说明 TransitionEffect以函数的形式指定转场效果。提供了以下接口： | 接口名称 | 参数类型 | 是否静态函数 | 参数描述 | | -------- | ---------- | -------- | -------- | @@ -49,7 +34,7 @@ TransitionEffect以函数的形式指定转场效果。提供了以下接口： | -------- | -------- | | IDENTITY | 禁用转场效果。 | | OPACITY | 指定透明度为0的转场效果。即相当于TransitionEffect.opacity(0) | -| SLIDE | 指定出现时从左侧滑入、消失时从右侧滑出的转场效果。即相当于TransitionEffect.asymmetric(TransitionEffect.START, TrasitionEffect.END) | +| SLIDE | 指定出现时从左侧滑入、消失时从右侧滑出的转场效果。即相当于TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.START), TransitionEffect.move(TransitionEdge.END)) | > **说明：** > @@ -57,47 +42,26 @@ TransitionEffect以函数的形式指定转场效果。提供了以下接口： > 2. 动画参数的生效顺序为：本TransitionEffect指定的animation参数 > 前面的TransitionEffect指定的animation参数 > 触发该组件出现消失的animateTo中的动画参数。 > 3. 如果未使用animateTo触发转场动画且TransitionEffect中也无animation参数，则该组件直接出现或者消失。 > 4. TransitionEffect中指定的属性值如与默认值相同，则该属性不会产生转场动画。如TransitionEffect.opacity(1).animation({duration:1000})，由于opacity默认值也为1，未产生透明度动画，该组件直接出现或者消失。 +> 5. 更详细的关于scale、rotate效果的介绍可参考[图形变换](ts-universal-attributes-transformation.md)。 -## 示例 -下面是一个出现消失使用TransitionOptions的示例。 -```ts -// xxx.ets -@Entry -@Component -struct TransitionExample { - @State flag: boolean = true - @State show: string = 'show' +## TransitionOptions(deprecated) +TransitionOptions通过指定结构体内的参数来指定转场效果。 - build() { - Column() { - Button(this.show).width(80).height(30).margin(30) - .onClick(() => { - // 点击Button控制Image的显示和消失 - if (this.flag) { - this.show = 'hide'; - } else { - this.show = 'show'; - } - // 使用TransitionOptions指定transition时，必须配合animateTo才能产生动画 - animateTo({ duration: 1000 }, () => { - this.flag = !this.flag - }) - }) - if (this.flag) { - // Image的显示和消失配置为不同的过渡效果 - // 出现时从指定的x方向scale为0、y方向scale为1的状态变为默认的x、y方向scale都为1的状态 - // 消失时从默认的旋转角为0变为绕z轴顺时针旋转180°的状态 - Image($r('app.media.testImg')).width(200).height(200) - .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) - .transition({ type: TransitionType.Delete, rotate: { z: 1, angle: 180 } }) - } - }.width('100%') - } -} -``` +从API version 10开始不再维护，建议使用[TransitionEffect](#transitioneffect10对象说明)代替。 +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 指定该转场样式生效的场景。
默认值：TransitionType.All
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
不指定type时默认为TransitionType.All，即插入删除都生效。 | +| opacity | number | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。
取值范围： [0, 1]
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
设置小于0或大于1的非法值时，按1处理。 | +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。
-x：横向的平移距离。
-y：纵向的平移距离。
-z：竖向的平移距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。
-x：横向放大倍数（或缩小比例）。
-y：纵向放大倍数（或缩小比例）。
-z：竖向放大倍数（或缩小比例）。
- centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为缩放中心点。
- 中心点为(0, 0)代表组件的左上角。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | 否 | 设置组件转场时的旋转效果，为插入时起点和删除时终点的值。
-x：横向的旋转向量分量。
-y：纵向的旋转向量分量。
-z：竖向的旋转向量分量。
- centerX、centerY指旋转中心点，centerX和centerY默认值是"50%"，即默认以组件的中心点为旋转中心点。
- 中心点为(0, 0)代表组件的左上角。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -示意图：
-![transitionComponent1](figures/transitionComponent1.gif) +> **说明：** +> +> 1. 当使用TransitionOptions类型的入参指定转场效果时，**必须**配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线、延时跟随animateTo中的配置。 +> 2. 当使用TransitionOptions作为入参，且不指定除type外的任何参数时，此时相当于指定了透明度的转场效果。例如，指定{type: TransitionType.Insert}相当于指定了{type: TransitionType.Insert, opacity: 0}的转场效果。而指定了具体效果时，则不会添加默认的透明度转场效果。 + +## 示例 下面是一个出现消失使用同一TransitionEffect（出现和消失互为逆过程）的示例。 ```ts diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index 87c656eecb0d185fa13b2a88577f02faa6e60c34..9d6836a92a0a5aaacd33614f770b3ae42ba2590d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -12,7 +12,7 @@ | 名称 | 参数 | 参数描述 | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| sharedTransition | id: string,
{
 duration?: number,
 curve?: Curve \| string,
 delay?: number,
 motionPath?:
{
 path: string,
 form?: number,
 to?: number,
 rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
- id：设置组件的id。
- duration：描述共享元素转场动效播放时长。
默认值：1000
单位：毫秒
取值范围：[0, +∞)
值为0时表示无动画。设置小于0的值时，按值为0处理。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md)说明。
- delay：用来描述共享元素转场动效延迟播放的时长。
默认值：0
单位：毫秒
取值范围：[0, +∞)
设置小于0的值时，按值为0处理。
- motionPath：运动路径信息，详细说明请参考[路径动画](ts-motion-path-animation.md)。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | +| sharedTransition | id: string,
{
 duration?: number,
 curve?: Curve \| string,
 delay?: number,
 motionPath?:
{
 path: string,
 form?: number,
 to?: number,
 rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
- id：设置组件的id。
- duration：描述共享元素转场动效播放时长。
默认值：1000
单位：毫秒
取值范围：[0, +∞)
值为0时表示无动画。设置小于0的值时，按默认值1000处理。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md)说明。
- delay：用来描述共享元素转场动效延迟播放的时长。
默认值：0
单位：毫秒
取值范围：[0, +∞)
设置小于0的值时，按值为0处理。
- motionPath：运动路径信息，详细说明请参考[路径动画](ts-motion-path-animation.md)。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | ## 示例