diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent1.png b/en/application-dev/reference/arkui-ts/figures/animationComponent1.png deleted file mode 100644 index b2aa53b14b112434bb736d2dc2f301bac3b46043..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animationComponent1.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent2.png b/en/application-dev/reference/arkui-ts/figures/animationComponent2.png deleted file mode 100644 index c348c9305503698fab2f6b401450048a653e581a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animationComponent2.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent3.png b/en/application-dev/reference/arkui-ts/figures/animationComponent3.png deleted file mode 100644 index b53d8f308a879d4b4ce84db7adac1289c8b85cfa..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animationComponent3.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent4.png b/en/application-dev/reference/arkui-ts/figures/animationComponent4.png deleted file mode 100644 index a93f8390861d3638a35de13f38e2ab51816b8083..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animationComponent4.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058460.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058460.gif deleted file mode 100644 index f70d75a50c028de29ab4b60075b7644316927eab..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058460.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978335.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978335.gif deleted file mode 100644 index 7a0a33ad1f90625edd3f24f7c8702ada65d6febd..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978335.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/pageTransition1.gif b/en/application-dev/reference/arkui-ts/figures/pageTransition1.gif new file mode 100644 index 0000000000000000000000000000000000000000..a8a8623279b5a93ca40461d522ccdb48eede1c42 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/pageTransition1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/pageTransition2.gif b/en/application-dev/reference/arkui-ts/figures/pageTransition2.gif new file mode 100644 index 0000000000000000000000000000000000000000..d1ef2f2889cac0428733478c6d81cc8e0b1ad84c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/pageTransition2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif b/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6b5dd0f0ca7d09218af2641e4ae2900eb394623d Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/transitionComponent2.gif b/en/application-dev/reference/arkui-ts/figures/transitionComponent2.gif new file mode 100644 index 0000000000000000000000000000000000000000..80b08806d4cdf08effc321bf64bba653d4a7398b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/transitionComponent2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/transitionComponent3.gif b/en/application-dev/reference/arkui-ts/figures/transitionComponent3.gif new file mode 100644 index 0000000000000000000000000000000000000000..2ff38b3e852bb8bcfabe5dc4e924cec0fa363c39 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/transitionComponent3.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md index 45fcd8c2bb0b7667f96dd869c19614a3981e0881..e637a22e1193f0fdb727b8ffe91e042ff167b6fd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md @@ -9,10 +9,9 @@ ## Child Components -> **NOTE** -> -> - Supported types of child components: built-in components and custom components, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. -> - Number of child components: multiple. +Supported types of child components: built-in components and custom components, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. + +Number of child components: multiple. ## APIs @@ -31,4 +30,11 @@ In addition to the [backgroundColor](ts-universal-attributes-background.md) attr ## Events -The [universal events](ts-universal-events-click.md) are supported. +In addition to the [universal events](ts-universal-events-click.md), the following events are supported. + + +| Name | Description | +| ---------------------------------------- | ---------------------------------------- | +| onShown(callback: (param: unknown) => void)10+ | Called when the navigation destination page is displayed. **param**: parameter information of the navigation destination page.
**NOTE**
The **onShown** API will be changed to **onShown(callback: () => void)**.| +| onHidden(callback: () => void)10+ | Called when the navigation destination page is hidden.| +| onBackPressed(callback: () => boolean)10+ | Called when the back button is pressed.
The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed.
| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index b761ae46e7409a709b37f39af778581f06186e96..72b9bb67da9e44ca5298039151dbe5b929ce408d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -16,8 +16,17 @@ Since API version 9, it is recommended that this component be used together with ## APIs -Navigation() +**API 1**: Navigation() +**API 2**: Navigation(pathInfos: NavPathStack)10+ + +Binds a navigation stack to the **\** component. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------- | ----------------------------------- | ---- | ------------- | +| pathInfos | [NavPathStack](#navpathstack10) | No | Information about the navigation stack.| ## Attributes @@ -32,13 +41,215 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar. If this attribute is not set, no toolbar is displayed.
**items**: items on the toolbar.
**NOTE**
Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...).| | hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.| | hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.| -| hideBackButton | boolean | Whether to hide the Back button.
Default value: **false**
**true**: Hide the Back button.
**false**: Display the Back button.
The Back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The Back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.| +| hideBackButton | boolean | Whether to hide the back button.
Default value: **false**
**true**: Hide the back button.
**false**: Display the back button.
The back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.| | navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200**
Unit: vp
**NOTE**
This attribute is valid only when the **\** component is split.| -| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.| -| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.| -| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The Back button in the title bar of the **\** component cannot be hidden.| +| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.| +| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.| +| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\** component cannot be hidden.| | hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.| +| navDestination10+ | builder: (name: string, param: unknown) => void | Creates a **\** component.
**NOTE**
The **builder** function is used, with the **name** and **param** parameters passsed in. In the builder, a layer of custom components can be included outside the **\** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| + +## NavPathStack10+ + +Implements a navigation stack. + +### push10+ + +push(info: NavPathInfo): void + +Pushes the NavDestination page information specified by **info** to the stack. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page. | + +### pushName10+ + +pushName(name: string, param: unknown): void + +Pushes the navigation destination page specified by **name** to the navigation stack. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | +| param | unknown | Yes | Parameter information of the navigation destination page. | + +### pop10+ + +pop(): NavPathInfo | undefined + +Pops the top element out of the navigation stack. + +**Return value** + +| Type | Description | +| ------ | -------- | +| NavPathInfo | Returns the information about the navigation destination page at the top of the stack.| +| undefined | Returns **undefined** if the navigation stack is empty.| + +### popTo10+ + +popTo(name: string): number + +Returns the navigation stack to the first navigation destination page that matches the value of **name**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | + +**Return value** + +| Type | Description | +| ------ | -------- | +| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| + +### popToIndex10+ + +popToIndex(index: number): void + +Returns the navigation stack to the navigation destination page that matches the value of **index**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| index | number | Yes | Index of the navigation destination page. | + +### moveToTop10+ + +moveToTop(name: string): number + +Moves to the top of the navigation stack the first navigation destination page that matches the value of **name**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | + +**Return value** + +| Type | Description | +| ------ | -------- | +| number | Returns the index of the first navigation destination page that matches the value of **name** if it exists in the navigation stack; returns **-1** otherwise.| + +### moveIndexToTop10+ + +moveIndexToTop(index: number): void + +Moves to the top of the navigation stack the navigation destination page that matches the value of **index**. +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| index | number | Yes | Index of the navigation destination page. | + +### clear10+ + +clear(): void + +Clears the navigation stack. + +### getAllPathName10+ + +getAllPathName(): Array + +Obtains the names of all navigation destination pages in the navigation stack. + +**Return value** + +| Type | Description | +| ------ | -------- | +| Array | Names of all navigation destination pages in the navigation stack.| + +### getParamByIndex10+ + +getParamByIndex(index: number): unknown | undefined + +Obtains the parameter information of the navigation destination page that matches the value of **index**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| index | number | Yes | Index of the navigation destination page. | + +**Return value** + +| Type | Description | +| ------ | -------- | +| unknown | Returns the parameter information of the matching navigation destination page.| +| undefined | Returns **undefined** if the passed index is invalid.| + +### getParamByName10+ + +getParamByName(name: string): Array + +Obtains the parameter information of all the navigation destination pages that match the value of **name**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | + +**Return value** + +| Type | Description | +| ------ | -------- | +| Array | Parameter information of all the matching navigation destination pages.| + +### getIndexByName10+ + +getIndexByName(name: string): Array + +Obtains the indexes information of all the navigation destination pages that match the value of **name**. + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | + +**Return value** + +| Type | Description | +| ------ | -------- | +| Array | Indexes of all the matching navigation destination pages.| + +### size10+ + +size(): number + +Obtains the stack size. + +**Return value** + +| Type | Description | +| ------ | -------- | +| number | Stack size.| + +## NavPathInfo10+ + +Describes the navigation page information. + +### constructor + +constructor(name: string, param: unknown) + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------ | ----------------------- | ---- | --------------- | +| name | string | Yes | Name of the navigation destination page. | +| param | unknown | No | Parameter information of the navigation destination page. | ## NavigationMenuItem @@ -102,6 +313,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the > **NOTE** +> > Among the scrollable components, only **\** is supported. @@ -109,8 +321,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Description | | ---------------------------------------- | ---------------------------------------- | -| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| -| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.| +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Called when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| +| onNavBarStateChange(callback: (isVisible: boolean) => void) | Called when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md index 8d35b928f71ec67a97fa45c7815cdd0387f3b0dd..3c1eba412a0dbe734c74ba07e586ffd8bf81e9b6 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md @@ -1,6 +1,6 @@ # NavRouter -The **\** component provides default logic for click response processing, eliminating the need for manual logic definition. +The **\** component provides default processing logic for responding to clicks, eliminating the need for manual logic definition. > **NOTE** > @@ -10,16 +10,56 @@ The **\** component provides default logic for click response process This component must contain two child components, the second of which must be **[\](ts-basic-components-navdestination.md)**. +> **NOTE** +> +> 1. If there is only one child component, the navigation to the **\** component does not work. +> 2. If there is only the **\** child component, the navigation is not performed. +> 3. If there are more than two child components, the excess child components are not displayed. +> 4. If the second child component is not **\**, the navigation does not work. + ## APIs -NavRouter() +**API 1**: NavRouter() + +**API 2**: NavRouter(value: RouteInfo)10+ + +Provides route information so that clicking the **\** component redirects the user to the specified navigation destination page. + + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------- | ----------------------------------- | ---- | ------------- | +| value | [RouteInfo](#routeinfo10) | No | Route information.| + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| ----------------------------- | ---------------------------------------- | ---------------------------------------- | +| mode | [NavRouteMode](#navroutemode) | Route mode used for redirection.
Default value: **NavRouteMode.PUSH_WITH_RECREATE**
| + +## RouteInfo10+ + +| Name | Type | Mandatory| Description | +| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| name | string | Yes | Name of the navigation destination page to be redirected to.| +| param | unknown | No | Parameter transferred during redirection.| + +## NavRouteMode +| Name | Description | +| ----- | ---------------- | +| PUSH_WITH_RECREATE | The new navigation destination page replaces the current one. The current page is destroyed, but the information about this page is retained in the navigation stack.| +| PUSH | The new navigation destination page overwrites the current one. The current page is not destroyed, and the information about this page is retained in the navigation stack.| +| REPLACE | The new navigation destination page replaces the current one. The current page is destroyed, and the information about this page is removed from the navigation stack.| ## Events -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onStateChange(callback: (isActivated: boolean) => void) | Invoked when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.
**NOTE**
After the user clicks **NavRouter**, if the **\** component is activated and the corresponding **\** child component loaded, **onStateChange(true)** is called. If the corresponding **\** child component is no longer displayed, **onStateChange(false)** is called. | +| Name | Description | +| ------------------------------------------------------- | ------------------------------------------------------------ | +| onStateChange(callback: (isActivated: boolean) => void) | Called when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.
**NOTE**
**onStateChange(true)** is called when the **\** component is activated and its **\** child component is loaded. **onStateChange(false)** is called when the **\** child component is not displayed.| ## 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 5cd36a45df7a1b6720be03d6ca9fe59d5f555cbf..e0a3bb339e1db622d902737a7f3a1d4f61d2cf64 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 **pageTransition** API. +You can customize the page entrance and exit animations in the **pageTransition** API for transition between pages. > **NOTE** > @@ -10,8 +10,8 @@ The page transition navigates users between pages. You can customize page transi | 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| +| 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**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **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.
Unit: ms
Default value: **0**
**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**.| +| 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**
- **duration**: animation duration.
Unit: ms
Default value: **1000**
- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.
Default value: **Curve.Linear**
- **delay**: animation delay.
Unit: ms
Default value: **0**
**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**.| ## RouteType @@ -26,10 +26,10 @@ The page transition navigates users between pages. You can customize page transi | Name | Type | Mandatory| Description | | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.
Default value: **SlideEffect.Right**| +| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.| | 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. | -| opacity | number | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit.
Default value: **1**| +| 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. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 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.| ## SlideEffect @@ -43,15 +43,15 @@ The page transition navigates users between pages. You can customize page transi ## Events -| Name | Description | +| Name | Description | | ------------------------------------------------------------ | ------------------------------------------------------------ | -| 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. | +| 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 -Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out. +Example 1: Apply the entrance animation of fade-in and the exit animation of zoom-out. ```ts // index.ets @@ -68,14 +68,14 @@ struct PageTransitionExample1 { } }.scale({ x: this.scale1 }).opacity(this.opacity1) } - // Customization method 1: Customize the transition process. + // Customize the transition process. pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale1 = 1 this.opacity1 = progress }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). - PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + PageTransitionExit({ duration: 1200, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale1 = 1 - progress this.opacity1 = 1 @@ -99,14 +99,14 @@ struct AExample { } }.width('100%').height('100%').scale({ x: this.scale2 }).opacity(this.opacity2) } - // Customization method 1: Customize the transition process. + // Customize the transition process. pageTransition() { PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) .onEnter((type: RouteType, progress: number) => { this.scale2 = 1 this.opacity2 = progress }) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%). - PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + PageTransitionExit({ duration: 1200, curve: Curve.Ease }) .onExit((type: RouteType, progress: number) => { this.scale2 = 1 - progress this.opacity2 = 1 @@ -115,31 +115,30 @@ struct AExample { } ``` -![en-us_image_0000001256978335](figures/en-us_image_0000001256978335.gif) +![pageTransition1](figures/pageTransition1.gif) -Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change. +Example 2: Apply the entrance animation of sliding in from the left and the exit animation of translating with opacity change. ```ts // index.ets @Entry @Component struct PageTransitionExample { - @State scale1: number = 1 - @State opacity1: number = 1 - build() { Column() { Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Image($r('app.media.bg1')).width('100%').height('100%') // Store the image in the media folder. } - }.scale({ x: this.scale1 }).opacity(this.opacity1) + } } - // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. + // Use the default effects provided by the system, such as translation, scaling, and opacity. pageTransition() { + // Set the duration of the entrance animation to 1200 ms, in the purpose of matching the duration of the exit animation of the other page. PageTransitionEnter({ duration: 1200 }) .slide(SlideEffect.Left) - PageTransitionExit({ delay: 100 }) + // Set the duration of the exit animation to 1000 ms, in the purpose of matching the duration of the entrance animation of the other page. + PageTransitionExit({ duration: 1000 }) .translate({ x: 100.0, y: 100.0 }) .opacity(0) } @@ -151,26 +150,25 @@ struct PageTransitionExample { @Entry @Component struct PageTransitionExample1 { - @State scale2: number = 1 - @State opacity2: number = 1 - build() { Column() { Navigator({ target: 'pages/index', type: NavigationType.Push }) { Image($r('app.media.bg2')).width('100%').height('100%') // Store the image in the media folder. } - }.scale({ x: this.scale2 }).opacity(this.opacity2) + } } - // Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity. + // Use the default effects provided by the system, such as translation, scaling, and opacity. pageTransition() { - PageTransitionEnter({ duration: 1200 }) + // Set the duration of the entrance animation to 1000 ms, in the purpose of matching the duration of the exit animation of the other page. + PageTransitionEnter({ duration: 1000 }) .slide(SlideEffect.Left) - PageTransitionExit({ delay: 100 }) + // Set the duration of the exit animation to 1200 ms, in the purpose of matching the duration of the entrance animation of the other page. + PageTransitionExit({ duration: 1200 }) .translate({ x: 100.0, y: 100.0 }) .opacity(0) } } ``` -![en-us_image_0000001212058460](figures/en-us_image_0000001212058460.gif) +![pageTransition2](figures/pageTransition2.gif) 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 cd072648a81f68b080ae88b9a90cf6a157376dc6..8018ee5d626d0fcb04dd36f3d70e2081736b189d 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 @@ -1,6 +1,6 @@ # Component Transition -Configure the component transition animations for when a component is inserted or deleted. This feature takes effect only when [animateTo](ts-explicit-animation.md) is used. The animation duration, curve, and delay are the same as those configured in **animateTo**. +You can configure the component transition animations through the **transition** attribute for when a component is inserted or deleted. > **NOTE** > @@ -12,21 +12,54 @@ Configure the component transition animations for when a component is inserted o | Name| Type| Description| | -------- | -------- | -------- | -| 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**.| +| transition | TransitionOptions \| TransitionEffect10+ | Transition effects when the component is inserted, displayed, deleted, or hidden.
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
For details, see the description of **TransitionOptions** and **TransitionEffect**.| ## TransitionOptions - +Defines the transition effect by setting parameters in the struct. | 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**
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**.| +| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type.
Default value: **TransitionType.All**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
If **type** is not specified, the default value **TransitionType.All** is used, which means that the transition effect works for both component addition and deletion.| +| 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.
Value range: [0, 1]
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 or 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.| +| 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**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to 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**: X-component of the rotation vector.
- **y**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.
Since API version 9, this API is supported in ArkTS widgets.| +> **NOTE** +> +> 1. When set to a value of the **TransitionOptions** type, the **transition** attribute must work with [animateTo](ts-explicit-animation.md). The animation duration, curve, and delay follow the settings in **animateTo**. +> 2. If the value of the **TransitionOptions** type has only **type** specified, the transition effect will take on the default opacity. For example, **{type: TransitionType.Insert}** produces the same effect as **{type: TransitionType.Insert, opacity: 0}**. If a specific style is specified, the transition effect will not take on the default opacity. +> 3. For details about the scale and rotate effects, see [Transformation](ts-universal-attributes-transformation.md). + +## TransitionEffect10+ +Defines the transition effect by using the provided APIs, as listed below. +| API| Type| Static Function| Description| +| -------- | ---------- | -------- | -------- | +| opacity | number | Yes| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.
Value range: [0, 1]
**NOTE**
A value less than 0 or greater than 1 evaluates to the value **1**.| +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | Yes| 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
} | Yes| 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**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| +| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | Yes| 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**: Y-component of the rotation vector.
- **z**: Z-component of the rotation vector.
- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.
- If the center point is (0, 0), it refers to the upper left corner of the component.| +| move | [TransitionEdge](ts-appendix-enums.md#transitionedge10) | Yes| Slide-in and slide-out of the component from the screen edge during transition. It is essentially a translation effect, which is the value of the start point of insertion and the end point of deletion.| +| asymmetric | appear: TransitionEffect,
disappear: TransitionEffect
| Yes| Asymmetric transition effect.
The first parameter indicates the transition effect for appearance, and the second parameter indicates the transition effect for disappearance.
If the **asymmetric** function is not used for **TransitionEffect**, the transition effect takes effect for both appearance and disappearance of the component.| +| combine | TransitionEffect | No| Combination of transition effects.| +| animation | [AnimateParam](ts-explicit-animation.md#animateparam) | No| Animation settings.
The **onFinish** callback in **AnimateParam** does not work here.
If **combine** is used for combining transition effects, the animation settings of a transition effect are applicable to the one following it.| + +The static functions listed in the preceding table are used to create a **TransitionEffect** object, while the non-static functions apply to the created **TransitionEffect** object. +**TransitionEffect** also provides some static member variables for transition effects: +| Static Member Variable| Description| +| -------- | -------- | +| IDENTITY | Disables the transition effect.| +| OPACITY | Applies a transition effect with the opacity of 0. It is equivalent to **TransitionEffect.opacity(0)**.| +| SLIDE | Applies a transition effect of sliding in from the left when the component appears and sliding out from the right when the component disappears. It is equivalent to **TransitionEffect.asymmetric(TransitionEffect.START, TrasitionEffect.END)**.| -## Example +> **NOTE** +> +> 1. For transition effects combined through the **combine** function, animation settings can be configured through the **animation** parameter on a one-on-one basis. In addition, the animation settings of a transition effect are applicable to the one following it. For example, with **TransitionEffect.OPACITY.animation({duration: 1000}).combine(TransitionEffect.translate({x: 100}))**, the **duration** settings (1000 ms) apply to both the OPACITY and translate effects. +> 2. The animation settings take effect in the following sequence: animation settings specified in the current **TransitionEffect** > animation settings specified in the previous **TransitionEffect** > animation settings specified in **animateTo** that triggers the component to appear and disappear. +> 3. If **animateTo** is not used and **TransitionEffect** does not have the **animation** parameter specified, the component will appear or disappear without any transition animation. +> 4. If the value of an attribute specified in **TransitionEffect** is the same as the default value, no transition animation is applied for the attribute. For example, with **TransitionEffect.opacity(1).animation({duration:1000})**, because the default value of **opacity** is also **1**, no opacity animation will be applied, and the component appears or disappears without any transition animation. +## Example +The following is an example of using **TransitionOptions** for appearance and disappearance of the component. ```ts // xxx.ets @Entry @@ -40,40 +73,121 @@ struct TransitionExample { Button(this.show).width(80).height(30).margin(30) .onClick(() => { // Click the button to show or hide the image. + if (this.flag) { + this.show = 'hide'; + } else { + this.show = 'show'; + } + // When set to a value of the TransitionOptions type, the transition attribute must work with animateTo. animateTo({ duration: 1000 }, () => { - if (this.flag) { - this.show = 'hide' - } else { - this.show = 'show' - } this.flag = !this.flag }) }) if (this.flag) { - // Apply different transition effects to the showing and hiding of the image. - Image($r('app.media.testImg')).width(300).height(300) + // Apply different transition effects to the appearance and disappearance of the image. + // When the image appears, it changes from the state where the scale factor is 0 along the x-axis and 1 along the y-axis to the state where the scale factor is both 1 along x-axis and y-axis. + // When the image disappears, it rotates from 0° to 180° clockwise around the z-axis. + Image($r('app.media.testImg')).width(200).height(200) .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) - .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) + .transition({ type: TransitionType.Delete, rotate: { z: 1, angle: 180 } }) } }.width('100%') } } ``` -Diagrams: - -When the image is completely displayed: - -![animationComponent1](figures/animationComponent1.png) - -When the transition effect of 180° clockwise rotation is applied to the hiding of the image: - -![animationComponent3](figures/animationComponent3.png) +Below you can see the example in action.
+![transitionComponent1](figures/transitionComponent1.gif) -When the image disappears completely: +The following is an example of using the same transition effect for the appearance and disappearance (which are inverse processes) of the component. +```ts +// xxx.ets +@Entry +@Component +struct TransitionEffectExample1 { + @State flag: boolean = true; + @State show: string = 'show'; -![animationComponent2](figures/animationComponent2.png) + build() { + Column() { + Button(this.show).width(80).height(30).margin(30) + .onClick(() => { + // Click the button to show or hide the image. + if (this.flag) { + this.show = 'hide'; + } else { + this.show = 'show'; + } + this.flag = !this.flag; + }) + if (this.flag) { + // Apply the same transition effect to the appearance and disappearance of the image. + // When the image appears, it changes from the state where the opacity is 0 and the rotation angle is 180° around the z-axis to the state where the opacity is 1 and the rotation angle is 0°. The durations of the opacity and rotation animations are both 2000 ms. + // When the image disappears, it changes from the state where the opacity is 1 and the rotation angle is 0° to the state where the opacity is 0 and the rotation angle is 180° around the z-axis. The durations of the opacity and rotation animations are both 2000 ms. + Image($r('app.media.testImg')).width(200).height(200) + .transition(TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine( + TransitionEffect.rotate({ z: 1, angle: 180 }) + )) + } + }.width('100%') + } +} +``` +Below you can see the example in action.
+![transitionComponent2](figures/transitionComponent2.gif) -When the transition effect of zooming in twice horizontally is applied to the image displayed: +The following is an example of using different transition effects for the appearance and disappearance of the component. +```ts +// xxx.ets +@Entry +@Component +struct TransitionEffectExample2 { + @State flag: boolean = true; + @State show: string = 'show'; -![animationComponent4](figures/animationComponent4.png) + build() { + Column() { + Button(this.show).width(80).height(30).margin(30) + .onClick(() => { + // Click the button to show or hide the image. + if (this.flag) { + this.show = 'hide'; + } else { + this.show = 'show'; + } + animateTo({ duration: 2000 }, () => { + // In the first image, **TransitionEffect** contains **animation**, and therefore the animation settings are those configured in **TransitionEffect**. + // In the second image, **TransitionEffect** does not contain **animation**, and therefore the animation settings are those configured in **animateTo**. + this.flag = !this.flag; + }); + }) + if (this.flag) { + // Apply different transition effects to the appearance and disappearance of the image. + // When the image appears, its opacity changes 0 to 1 (default value) over the duration of 1000 ms, and after 1000 ms has elapsed, its rotation angle changes from 180° around the z-axis to 0° (default value) over the duration of 1000 ms. + // When the image disappears, after 1000 ms has elapsed, its opacity changes 1 (default value) to 0 over the duration of 1000 ms, and its rotation angle changes from 0° (default value) to 180° around the z-axis over the duration of 1000 ms. + Image($r('app.media.testImg')).width(200).height(200) + .transition( + TransitionEffect.asymmetric( + TransitionEffect.OPACITY.animation({ duration: 1000 }).combine( + TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ delay: 1000, duration: 1000 })) + , + TransitionEffect.OPACITY.animation({ delay: 1000, duration: 1000 }).combine( + TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ duration: 1000 })) + ) + ) + // When the image appears, the scale along the x- and y- axes is changed from 0 to 1 (default value). The animation duration is 2000 ms specified in **animateTo**. + // When the image disappears, no transition effect is applied. + Image($r('app.media.testImg')).width(200).height(200).margin({ top: 100 }) + .transition( + TransitionEffect.asymmetric( + TransitionEffect.scale({ x: 0, y: 0 }), + TransitionEffect.IDENTITY + ) + ) + } + }.width('100%') + } +} +``` +Below you can see the example in action.
+![transitionComponent3](figures/transitionComponent3.gif)