diff --git a/en/application-dev/reference/arkui-js/js-components-common-mediaquery.md b/en/application-dev/reference/arkui-js/js-components-common-mediaquery.md index 30d94245e6e41d153dbe15f04e5f650a1f813a2e..3b6b1898bb78591d6c4b1944d31295c046e11618 100644 --- a/en/application-dev/reference/arkui-js/js-components-common-mediaquery.md +++ b/en/application-dev/reference/arkui-js/js-components-common-mediaquery.md @@ -64,11 +64,11 @@ Media logical operators (and, or, not, and only) are used to implement complex m | Type | Description | | -------- | ---------------------------------------- | -| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.
For example, **screen and (device-type: wearable) and (max-height: 600) ** evaluates to true when the device type is wearable and the maximum height of the application is 600 pixel units.| -| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.
For example, **not screen and (min-height: 50) and (max-height: 600) ** evaluates to true when the height of the application is less than 50 pixel units or greater than 600 pixel units.
You must specify the media type when using the **not** operator.| +| and | The **and** operator is used to combine multiple media features into one media query, in a logical AND operation. The query is valid only when all media features are true. It can also combine media types and media functions.
For example, **screen and (device-type: wearable) and (max-height: 600)** evaluates to **true** when the device type is wearable and the maximum height of the application is 600 pixel units.| +| not | The **not** operator is used to perform a logical negation for a media query. **true** is returned if the query condition is not met. Otherwise, **false** is returned. In a media query list, logical negation is performed only for the media query using the **not** operator.
For example, **not screen and (min-height: 50) and (max-height: 600)** evaluates to **true** when the height of the application is less than 50 pixel units or greater than 600 pixel units.
You must specify the media type when using the **not** operator.| | only | The **only** operator applies the selected style only when the entire expression is matched. It can be used to prevent ambiguity on browsers of earlier versions. The statements that contain both media types and media features produce ambiguity when they are received by some browsers of earlier versions. For example:
screen and (min-height: 50)
The browsers of earlier versions would mislead this sentence into **screen**, causing the fact that the specified style is applied when only the media type is matched. In this case, the **only** operator can be used to avoid this problem.
You must specify the media type when using the **only** operator.| -| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.
For example, **screen and (min-height: 1000), (round-screen: true) ** evaluates to true when the minimum height of the application is 1000 pixel units or the device screen is round.| -| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.
For example, **screen and (max-height: 1000) or (round-screen: true)** evaluates to true when the maximum height of the application is 1000 pixel units or the device screen is round.| +| ,(comma) | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true. The effect of a comma operator is equivalent to that of the **or** operator.
For example, **screen and (min-height: 1000), (round-screen: true)** evaluates to **true** when the minimum height of the application is 1000 pixel units or the device screen is round.| +| or | The **or** operator is used to combine multiple media features into one media query, in a logical OR operation. The query is valid if a media feature is true.
For example, **screen and (max-height: 1000) or (round-screen: true)** evaluates to **true** when the maximum height of the application is 1000 pixel units or the device screen is round.| At MediaQuery Level 4, range query is imported so that you can use the operators including <=, >=, <, and > besides the max- and min-operators. diff --git a/en/application-dev/reference/arkui-ts/figures/list1.gif b/en/application-dev/reference/arkui-ts/figures/list1.gif new file mode 100644 index 0000000000000000000000000000000000000000..3e09842f3905ddf22e145b044238340b07b480ca Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/list1.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md index d5d669429dcb6af79c26cdc49661f1087c871472..11ce9d0312a22f1e9c432d99716319589b551d43 100644 --- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -14,13 +14,13 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Description | | ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ | -| duration | number | No | Animation duration, in ms.
Default value: **1000**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The maximum animation duration on an ArkTS widget is 1000 ms. If the set value exceeds the limit, the value **1000** will be used. | -| tempo | number | No | Animation playback speed. A greater value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**| -| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets. | -| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0** | -| iterations | number | No | Number of times that the animation is played. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**| +| duration | number | No | Animation duration, in ms.
Default value: **1000**
Unit: ms
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
- The maximum animation duration on an ArkTS widget is 1000 ms.
- A value less than 1 evaluates to the value **0**.
- If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| +| tempo | number | No | Animation playback speed. A larger value indicates a higher animation playback speed.
The value **0** indicates that no animation is applied.
Default value: **1**
**NOTE**
A value less than 1 evaluates to the value **1**.| +| curve | string \| [Curve](ts-appendix-enums.md#curve) \| ICurve9+ | No | Animation curve. The default curve is linear.
Default value: **Curve.Linear**
Since API version 9, this API is supported in ArkTS widgets.| +| delay | number | No | Delay of animation playback, in ms. The value **0** indicates that the playback is not delayed.
Default value: **0**
Value range: [0, +∞)
**NOTE**
A value less than 1 evaluates to the value **0**. If the value is of the floating point type, the value is rounded down. If the value is 1.2, the value **1** is used.| +| iterations | number | No | Number of times that the animation is played.
Default value: **1**
Value range: [-1, +∞)
**NOTE**
The value **-1** indicates that the animation is played for an unlimited number of times. The value **0** indicates that no animation is applied.| | playMode | [PlayMode](ts-appendix-enums.md#playmode) | No | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.
Default value: **PlayMode.Normal**
Since API version 9, this API is supported in ArkTS widgets.| -| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.| +| onFinish | () => void | No | Callback invoked when the animation playback is complete.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
This callback is not invoked when **iterations** is set to **-1**.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md index cf2dda07a27288101b36e111dd5ff2a51c390dff..dbc249b03b068a777ce4977e940f52860720d037 100644 --- a/en/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/en/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -237,8 +237,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | ------ | -------------------------------------------------- | | All | The transition takes effect in all scenarios.| -| Insert | The transition takes effect when a component is inserted. | -| Delete | The transition takes effect when a component is deleted. | +| Insert | The transition takes effect when a component is inserted or displayed.| +| Delete | The transition takes effect when a component is deleted or hidden.| ## RelateType @@ -307,12 +307,12 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Description | | -------- | ------------------------------------------------------------ | -| Auto | The default configuration in the flex container is used. | -| Start | The elements are in the flex container, top-aligned in the cross-axis direction. | -| Center | The elements are in the flex container, centered in the cross-axis direction. | -| End | The elements are in the flex container, bottom-aligned in the cross-axis direction. | -| Stretch | The elements are in the flex container, stretched and padded in the cross-axis direction. If the size is not set, the elements are stretched to the container size.| -| Baseline | The elements are in the flex container, text baseline aligned in the cross-axis direction. | +| Auto | The default configuration of the flex container is used. | +| Start | The items in the flex container are aligned with the cross-start edge. | +| Center | The items in the flex container are centered along the cross axis. | +| End | The items in the flex container are aligned with the cross-end edge. | +| Stretch | The items in the flex container are stretched and padded along the cross axis. If the flex container has the **Wrap** attribute set to **FlexWrap.Wrap** or **FlexWrap.WrapReverse**, the items are stretched to the cross size of the widest element on the current row or column. In other cases, the items with no size set are stretched to the container size.| +| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis. | ## FlexDirection @@ -520,30 +520,30 @@ Since API version 9, this API is supported in ArkTS widgets. This API is supported in ArkTS widgets. - | Name| Description| - | ------- | ---------- | - | Thin | Thin material. | - | Regular | Regular material. | - | Thick | Thick material. | - | BackgroundThin | Material that creates the minimum depth of field effect.| - | BackgroundRegular | Material that creates a medium shallow depth of field effect.| - | BackgroundThick | Material that creates a high shallow depth of field effect.| - | BackgroundUltraThick | Material that creates the maximum depth of field effect.| - +| Name| Description| +| ------- | ---------- | +| Thin | Thin material. | +| Regular | Regular material. | +| Thick | Thick material. | +| BackgroundThin | Material that creates the minimum depth of field effect.| +| BackgroundRegular | Material that creates a medium shallow depth of field effect.| +| BackgroundThick | Material that creates a high shallow depth of field effect.| +| BackgroundUltraThick | Material that creates the maximum depth of field effect.| + ## ThemeColorMode10+ - | Name | Description | - | ------- | ---------- | - | System | Following the system color mode.| - | Light | Light color mode.| - | Dark | Dark color mode.| +| Name | Description | +| ------- | ---------- | +| System | Following the system color mode.| +| Light | Light color mode.| +| Dark | Dark color mode.| ## AdaptiveColor10+ - | Name | Description | - | ------- | ----------- | - | Default | Adaptive color mode is not used. The default color is used as the mask color.| - | Average | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.| +| Name | Description | +| ------- | ----------- | +| Default | Adaptive color mode is not used. The default color is used as the mask color.| +| Average | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.| ## TextHeightAdaptivePolicy10+ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md index de00ad6ba70f1ddb0cf8bff57e2f8ef7bfec26cf..7339314e264130287248efd6e5e5a2e696a726e7 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets. | stateEffect | boolean | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| | labelStyle10+ | [LabelStyle](#labelstyle10) | Label style of the button.| -## ButtonType enums +## ButtonType Since API version 9, this API is supported in ArkTS widgets. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md index 4b8520cfa0e7a2b173eda68caa17d379f5c42759..e1e0af8f5fa486e762f569c7a9f1f628147f9e64 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md @@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**| +| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.
Default value: **1**
Value range: 1 to 10
**NOTE**
If the value is less than 1 or is not set, the default value is used.| | direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.
Default value: **PanDirection.All**| | distance | number | No| Minimum pan distance to trigger the gesture, in vp.
Default value: **5**
**NOTE**
If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md index 03109744f1cdc09ed7b2d9f7d7687db8944f602f..ef9a851b418959eeb04ed06675815d82a9bd7dc4 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md @@ -1,6 +1,6 @@ # TapGesture -**TapGesture** is used to trigger a tap gesture with one or more taps. +**TapGesture** is used to trigger a tap gesture with one, two, or more taps. > **NOTE** > @@ -15,8 +15,8 @@ TapGesture(value?: { count?: number, fingers?: number }) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| count | number | No| Number of consecutive taps. If this parameter is set to a value less than **1**, the default value will be used.
Default value: **1**
> **NOTE**
> If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.| -| fingers | number | No| Number of fingers required to trigger a tap. The value ranges from 1 to 10.
Default value: **1**
> **NOTE**
> 1. When multi-finger is configured, the gesture will fail to be recognized if the number of fingers used for tapping is less than the configured number within 300 ms of tapping by the first finger.
> 2. The gesture will fail to be recognized if the number of fingers used for tapping exceeds the configured number.| +| count | number | No| Number of consecutive taps. If the value is less than 1 or is not set, the default value is used.
Default value: **1**
**NOTE**
If multi-tap is configured, the timeout interval between a lift and the next tap is 300 ms.| +| fingers | number | No| Number of fingers required to trigger a tap. The value ranges from 1 to 10. If the value is less than 1 or is not set, the default value is used.
Default value: **1**
**NOTE**
1. When multi-finger is configured, if the number of fingers used for tap does not reach the specified number within 300 ms after the first finger is tapped, the gesture fails to be recognized.
2. Gesture recognition fails if the number of fingers used for tap exceeds the configured number.| ## Events diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index 9efd6ab6e939ee495789cde41a294e15da37a3a7..09d9024fb37381dfd67e4bf34688092d94c491fb 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -183,7 +183,7 @@ struct ListLanesExample { .lanes({ minLength: 40, maxLength: 40 }) .alignListItem(this.alignListItem) - Button("Change alignListItem: "+ this.alignListItem).onClick(() => { + Button("Click to modify alignListItem: "+ this.alignListItem).onClick(() => { if (this.alignListItem == ListItemAlign.Start) { this.alignListItem = ListItemAlign.Center } else if (this.alignListItem == ListItemAlign.Center) { diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index 6dc3c53496053d90595a0fab3010759250e9acb9..86400597c389b6b30ec1dff940b657e53e25ca26 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -22,7 +22,7 @@ SideBarContainer( type?: SideBarContainerType ) | -------- | -------- | -------- | -------- | | type | SideBarContainerType | No| Display type of the sidebar.
Default value: **SideBarContainerType.Embed**| -## SideBarContainerType enums +## SideBarContainerType | Name| Description| | -------- | -------- | diff --git a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md index 37f51638b8383dfab8aba2ddb3f6e7c441419b8a..fd98aadd3525b1d6d37262125bdc544833e9d129 100644 --- a/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -11,7 +11,7 @@ The motion path animation is used to animate a component along a custom path. | Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path. The default value is **0.0**.
- **to**: end point of the motion path. The default value is **1.0**.
- **rotatable**: whether to rotate along the path.| +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**NOTE**
In a path, **start** and **end** can be used to replace the start point and end point. Example:
'Mstart.x start.y L50 50 Lend.x end.y Z'
For more information, see [Path Drawing](../../ui/ui-js-components-svg-path.md).| {
'',
0.0,
1.0,
false
} | Motion path of the component.
- **path**: motion path of the translation animation. The value is an SVG path string.
- **from**: start point of the motion path.
Default value: **0.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.
- **to**: end point of the motion path.
Default value: **1.0**
Value range: [0, 1]
A value less than 0 evaluates to the value **0**. A value larger than 1 evaluates to the value **1**.
- **rotatable**: whether to rotate along the path. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md index fe419d713fe257eb593064363f8e1e8d1afe0e92..5cd36a45df7a1b6720be03d6ca9fe59d5f555cbf 100644 --- a/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/en/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -1,6 +1,6 @@ # Page Transition -The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global **pageTransition** API. +The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the **pageTransition** API. > **NOTE** > @@ -8,12 +8,12 @@ The page transition navigates users between pages. You can customize page transi > -| Name | Parameter | Description | -| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**Note**: If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.| -| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**Note**: If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay, in milliseconds. By default, the animation is played without delay.| +| Name | Parameter | Mandatory| Description | +| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | No | Page entrance animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration.
Unit: ms
- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".
Default value: **Curve.Linear**
- **delay**: animation delay.
Default value: **0**
Unit: ms| +| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: [Curve](ts-appendix-enums.md#curve) \| string,
delay?: number
} | No | Page exit animation.
- **type**: route type for the page transition effect to take effect.
Default value: **RouteType.None**
**NOTE**
If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.
- **duration**: animation duration, in milliseconds.
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay.
Default value: **0**
Unit: ms| -## RouteType enums +## RouteType | Name| Description | | ---- | ------------------------------------------------------------ | @@ -28,7 +28,7 @@ The page transition navigates users between pages. You can customize page transi | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.
Default value: **SlideEffect.Right**| | translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.
- **x**: translation distance along the x-axis.
- **y**: translation distance along the y-axis.
- **z**: translation distance along the y-axis.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.
- **x**: scale ratio along the x-axis.
- **y**: scale ratio along the y-axis.
- **z**: scale ratio along the z-axis.
- **centerX** and **centerY**: scale center point.
- If the center point is 0, it refers to the upper left corner of the component.
| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.
- **x**: scale ratio along the x-axis.
- **y**: scale ratio along the y-axis.
- **z**: scale ratio along the z-axis.
- **centerX** and **centerY**: scale center point.
- If the center point is 0, it refers to the upper left corner of the component. | | opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.
Default value: **1**| ## SlideEffect @@ -43,10 +43,10 @@ The page transition navigates users between pages. You can customize page transi ## Events -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| onEnter(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| -| onExit(event: (type?: RouteType, progress?: number) => void) | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress.| +| onEnter(event: (type?: RouteType, progress?: number) => void) | Invoked once every animation frame until the entrance animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress. | +| onExit(event: (type?: RouteType, progress?: number) => void) | Invoked once every animation frame until the exit animation ends, when the value of **progress** changes from 0 to 1. The input parameter is the normalized progress of the current exit animation. The value range is 0–1.
- **type**: route type.
- **progress**: current progress. | ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 7c62710b64759d42e205eb91b010fb50e478e108..cd072648a81f68b080ae88b9a90cf6a157376dc6 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -12,17 +12,17 @@ Configure the component transition animations for when a component is inserted o | Name| Type| Description| | -------- | -------- | -------- | -| transition | TransitionOptions | Transition parameters, which are all optional. For details, see **TransitionOptions**.| +| transition | TransitionOptions | Transition effects when the component is inserted, displayed, deleted, or hidden.
If no transition effect is set, an opacity transition from 0 to 1 is applied.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
Transition parameters, which are all optional. For details, see **TransitionOptions**.| ## TransitionOptions | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| -| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**| -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.| -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
| -| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.| +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type, which includes component addition and deletion by default.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, insertion and deletion use the same transition type.| +| opacity | number | No| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Default value: **1**
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
-**x**: distance to translate along the x-axis.
-**y**: distance to translate along the y-axis.
-**z**: distance to translate along the z-axis.
Since API version 9, this API is supported in ArkTS widgets.| +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: scale factor along the x-axis.
- **y**: scale factor along the y-axis.
- **z**: scale factor along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.
- If the center point is 0, it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.
- **x**: rotation vector along the x-axis.
- **y**: rotation vector along the y-axis.
- **z**: rotation vector along the z-axis.
- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.
- If the center point is (0, 0), it indicates the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index cd3f67300cfa8b63bac83b973dcb404590426d27..2fcbfe67f010ea80ca278932bf4210074d438878 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -1,6 +1,6 @@ -# Transition of Shared Elements +# Shared Element Transition -Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page. +A shared element transition is a transition animation applied to a component that is present on two pages. This component is called the shared element and can be set in the **sharedTransition** attribute. > **NOTE** > @@ -10,14 +10,14 @@ Shared element transition can be used for transition between pages, for example, ## Attributes -| Name | Parameters | Description | +| Name | Parameter | Description | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| 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)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration, in ms. The default duration is 1000 ms.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: Delay of animation playback, in ms. By default, the playback is not delayed.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation 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)
} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.
- **id**: component ID.
- **duration**: animation duration.
Default value: **1000**
Unit: ms
Value range: [0, +∞)
The value **0** indicates that no animation is applied. A value less than 0 evaluates to the value **0**.
- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).
- **delay**: animation delay.
Default value: **0**
Unit: ms
Value range: [0, +∞)
A value less than 0 evaluates to the value **0**.
- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).
- **path**: path.
- **from**: start value.
- **to**: end value.
- **rotatable**: whether to rotate.
- **zIndex**: z-axis.
- **type**: animation type.| ## Example - The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. +This example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image. ```ts // xxx.ets