Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 a82b0813 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19064 翻译完成 18032+17936 

Merge pull request !19064 from ester.zhou/TR-18032
上级 39e5e8f8 c97f6c31
隐藏空白更改
内联 并排
Showing with 446 addition and 76 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md
浏览文件 @ a82b0813
......@@ -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) =&gt; void)<sup>10+</sup> | Called when the navigation destination page is displayed. **param**: parameter information of the navigation destination page.<br>**NOTE**<br>The **onShown** API will be changed to **onShown(callback: () =&gt; void)**.|
| onHidden(callback: () =&gt; void)<sup>10+</sup> | Called when the navigation destination page is hidden.|
| onBackPressed(callback: () =&gt; boolean)<sup>10+</sup> | Called when the back button is pressed.<br>The value **true** means that the back button logic is overridden, and **false** means that the previous page is displayed.<br>|
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ a82b0813
......@@ -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)<sup>10+</sup>
Binds a navigation stack to the **\<Navigation>** 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)<sup>8+</sup> | Content of the toolbar. If this attribute is not set, no toolbar is displayed.<br>**items**: items on the toolbar.<br>**NOTE**<br>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.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
| hideBackButton | boolean | Whether to hide the Back button.<br>Default value: **false**<br>**true**: Hide the Back button.<br>**false**: Display the Back button.<br>The Back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The Back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Display the back button.<br>The back button in the title bar of the **\<NavDestination>** component cannot be hidden.<br>**NOTE**<br>The back button is available only when **titleMode** is set to **NavigationTitleMode.Mini**.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.|
| backButtonIcon<sup>9+</sup> | 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 **\<NavDestination>** component cannot be hidden.|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**<br>**NOTE**<br>This attribute is valid only when the **\<Navigation>** component is split.|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.|
| backButtonIcon<sup>9+</sup> | 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 **\<NavDestination>** component cannot be hidden.|
| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | Creates a **\<NavDestination>** component.<br>**NOTE**<br>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 **\<NavDestination>** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.|
## NavPathStack<sup>10+</sup>
Implements a navigation stack.
### push<sup>10+</sup>
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. |
### pushName<sup>10+</sup>
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. |
### pop<sup>10+</sup>
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.|
### popTo<sup>10+</sup>
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.|
### popToIndex<sup>10+</sup>
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. |
### moveToTop<sup>10+</sup>
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.|
### moveIndexToTop<sup>10+</sup>
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. |
### clear<sup>10+</sup>
clear(): void
Clears the navigation stack.
### getAllPathName<sup>10+</sup>
getAllPathName(): Array<string\>
Obtains the names of all navigation destination pages in the navigation stack.
**Return value**
| Type | Description |
| ------ | -------- |
| Array<string\> | Names of all navigation destination pages in the navigation stack.|
### getParamByIndex<sup>10+</sup>
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.|
### getParamByName<sup>10+</sup>
getParamByName(name: string): Array<unknown\>
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<unknown\> | Parameter information of all the matching navigation destination pages.|
### getIndexByName<sup>10+</sup>
getIndexByName(name: string): Array<number\>
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<number\> | Indexes of all the matching navigation destination pages.|
### size<sup>10+</sup>
size(): number
Obtains the stack size.
**Return value**
| Type | Description |
| ------ | -------- |
| number | Stack size.|
## NavPathInfo<sup>10+</sup>
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 **\<List>** is supported.
......@@ -109,8 +321,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; 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) =&gt; void) | Called when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; 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
......
en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md
浏览文件 @ a82b0813
# NavRouter
The **\<NavRouter>** component provides default logic for click response processing, eliminating the need for manual logic definition.
The **\<NavRouter>** component provides default processing logic for responding to clicks, eliminating the need for manual logic definition.
> **NOTE**
>
......@@ -10,16 +10,56 @@ The **\<NavRouter>** component provides default logic for click response process
This component must contain two child components, the second of which must be **[\<NavDestination>](ts-basic-components-navdestination.md)**.
> **NOTE**
>
> 1. If there is only one child component, the navigation to the **\<NavDestination>** component does not work.
> 2. If there is only the **\<NavDestination>** 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 **\<NavDestination>**, the navigation does not work.
## APIs
NavRouter()
**API 1**: NavRouter()
**API 2**: NavRouter(value: RouteInfo)<sup>10+</sup>
Provides route information so that clicking the **\<NavRouter>** 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.<br>Default value: **NavRouteMode.PUSH_WITH_RECREATE**<br>|
## RouteInfo<sup>10+</sup>
| 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.<br> **NOTE**<br>After the user clicks **NavRouter**, if the **\<NavRouter>** component is activated and the corresponding **\<NavDestination>** child component loaded, **onStateChange(true)** is called. If the corresponding **\<NavDestination>** 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.<br> **NOTE**<br>**onStateChange(true)** is called when the **\<NavRouter>** component is activated and its **\<NavDestination>** child component is loaded. **onStateChange(false)** is called when the **\<NavDestination>** child component is not displayed.|
## Example
......
en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ a82b0813
# 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 | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**NOTE**<br>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**.<br>- **duration**: animation duration.<br>Unit: ms<br>- **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".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms|
| PageTransitionExit | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>**NOTE**<br>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**.<br>- **duration**: animation duration, in milliseconds.<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms|
| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **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".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>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 | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>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.<br>Default value: **SlideEffect.Right**|
| slide | [SlideEffect](#slideeffect) | No | Slide effect during page transition.|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | 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.<br>- **x**: translation distance along the x-axis.<br>- **y**: translation distance along the y-axis.<br>- **z**: translation distance along the y-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point.<br>- 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.<br>Default value: **1**|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit.<br>- **x**: scale ratio along the x-axis.<br>- **y**: scale ratio along the y-axis.<br>- **z**: scale ratio along the z-axis.<br>- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.<br>|
| 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) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress. |
| onExit(event: (type?: RouteType, progress?: number) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress. |
| onEnter(event: (type?: RouteType, progress?: number) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> |
| onExit(event: (type?: RouteType, progress?: number) =&gt; 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.<br>- **type**: route type.<br>- **progress**: current progress.<br> <br> |
## 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)
en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
浏览文件 @ a82b0813
# 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.<br>If no transition effect is set, an opacity transition from 0 to 1 is applied. <br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Transition parameters, which are all optional. For details, see **TransitionOptions**.|
| transition | TransitionOptions \| TransitionEffect<sup>10+</sup> | Transition effects when the component is inserted, displayed, deleted, or hidden.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **TransitionType.All**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **1**<br>Value range: [0, 1]<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Default value: **TransitionType.All**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>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.<br>Value range: [0, 1]<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 or greater than 1 evaluates to the value **1**.|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | No| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.<br>Since API version 9, this API is supported in ArkTS widgets.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the scale center, respectively. The default values are both **"50%"**.<br>- If the center point is 0, it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: rotation vector along the y-axis.<br>- **z**: rotation vector along the z-axis.<br>- **centerX** and **centerY**: x coordinate and y coordinate of the rotation center, respectively. The default values are both **"50%"**.<br>- If the center point is (0, 0), it indicates the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | No| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | No| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: X-component of the rotation vector.<br>- **y**: Y-component of the rotation vector.<br>- **z**: Z-component of the rotation vector.<br>- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.<br>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).
## TransitionEffect<sup>10+</sup>
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.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 or greater than 1 evaluates to the value **1**.|
| translate | {<br>x? : number \| string,<br>y? : number \| string,<br>z? : number \| string<br>} | Yes| Translation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>-**x**: distance to translate along the x-axis.<br>-**y**: distance to translate along the y-axis.<br>-**z**: distance to translate along the z-axis.|
| scale | {<br>x? : number,<br>y? : number,<br>z? : number,<br>centerX? : number \| string,<br>centerY? : number \| string<br>} | Yes| Scaling of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: scale factor along the x-axis.<br>- **y**: scale factor along the y-axis.<br>- **z**: scale factor along the z-axis.<br>- **centerX** and **centerY**: scale center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- If the center point is (0, 0), it refers to the upper left corner of the component.|
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Yes| Rotation of the component during transition, which is the value of the start point of insertion and the end point of deletion.<br>- **x**: rotation vector along the x-axis.<br>- **y**: Y-component of the rotation vector.<br>- **z**: Z-component of the rotation vector.<br>- **centerX** and **centerY**: rotation center point. The default values are both **"50%"**, indicating that the center point of the page.<br>- 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,<br>disappear: TransitionEffect<br>| Yes| Asymmetric transition effect.<br>The first parameter indicates the transition effect for appearance, and the second parameter indicates the transition effect for disappearance.<br>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.<br>The **onFinish** callback in **AnimateParam** does not work here.<br>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.<br>
![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.<br>
![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.<br>
![transitionComponent3](figures/transitionComponent3.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或