Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“d12252e6a6479fe8031ef993a74a53bba8411eb8”上不存在“...tests/git@gitcode.net:s920243400/PaddleDetection.git”
未验证 提交 492981fb 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!9507 翻译完成 8975 

Merge pull request !9507 from ester.zhou/C1-0915
上级 7a2b8514 30d5db8b
显示空白变更内容
内联 并排
Showing with 195 addition and 231 deletion
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 492981fb
# Lottie # Lottie
**Lottie** allows you to implement animation-specific operations.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -13,14 +14,15 @@ None ...@@ -13,14 +14,15 @@ None
## Modules to Import ## Modules to Import
``` ```
import lottie from '@ohos/lottieETS' import lottie from '@ohos/lottieETS'
``` ```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> >
> In the **Terminal** window, run the `npm install @ohos/lottieETS` command to download Lottie. > In the **Terminal** window, run the `npm install @ohos/lottieETS` command to download Lottie.
>
> To install an OpenHarmony npm third-party package, run the `npm config set @ohos:registry=https://repo.harmonyos.com/npm/` command to set the repository address.
## lottie.loadAnimation ## lottie.loadAnimation
...@@ -29,15 +31,15 @@ loadAnimation( ...@@ -29,15 +31,15 @@ loadAnimation(
path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
Loads an animation. Before calling this method, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**. Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. | | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**. |
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance. | | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. | | render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
...@@ -51,12 +53,12 @@ Destroys the animation. This method must be called when a page exits. This metho ...@@ -51,12 +53,12 @@ Destroys the animation. This method must be called when a page exits. This metho
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed. | | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
- Example - Example
```ts
``` // xxx.ets
import lottie from '@ohos/lottieETS' import lottie from '@ohos/lottieETS'
@Entry @Entry
...@@ -67,7 +69,7 @@ Destroys the animation. This method must be called when a page exits. This metho ...@@ -67,7 +69,7 @@ Destroys the animation. This method must be called when a page exits. This metho
private animatePath: string = "common/lottie/data.json" private animatePath: string = "common/lottie/data.json"
private animateItem: any = null private animateItem: any = null
private onPageHide(): void { onPageHide(): void {
console.log('onPageHide') console.log('onPageHide')
lottie.destroy() lottie.destroy()
} }
...@@ -120,7 +122,7 @@ Destroys the animation. This method must be called when a page exits. This metho ...@@ -120,7 +122,7 @@ Destroys the animation. This method must be called when a page exits. This metho
} }
``` ```
![en-us_image_0000001256978355](figures/en-us_image_0000001256978355.gif) ![en-us_image_0000001194352468](figures/en-us_image_0000001194352468.gif)
## lottie.play ## lottie.play
...@@ -131,12 +133,11 @@ Plays a specified animation. ...@@ -131,12 +133,11 @@ Plays a specified animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played. | | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
- Example - Example
```ts
```
lottie.play(this.animateName) lottie.play(this.animateName)
``` ```
...@@ -149,12 +150,11 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani ...@@ -149,12 +150,11 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example - Example
```ts
```
lottie.pause(this.animateName) lottie.pause(this.animateName)
``` ```
...@@ -167,12 +167,11 @@ Pauses or plays a specified animation. This method is equivalent to the switchin ...@@ -167,12 +167,11 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example - Example
```ts
```
lottie.togglePause(this.animateName) lottie.togglePause(this.animateName)
``` ```
...@@ -185,12 +184,11 @@ Stops the specified animation. The next time **lottie.play()** is called, the an ...@@ -185,12 +184,11 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused. | | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
- Example - Example
```ts
```
lottie.stop(this.animateName) lottie.stop(this.animateName)
``` ```
...@@ -203,13 +201,12 @@ Sets the playback speed of the specified animation. ...@@ -203,13 +201,12 @@ Sets the playback speed of the specified animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed. | | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays in backward. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped. | | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
- Example - Example
```ts
```
lottie.setSpeed(5, this.animateName) lottie.setSpeed(5, this.animateName)
``` ```
...@@ -222,13 +219,12 @@ Sets the direction in which the specified animation plays. ...@@ -222,13 +219,12 @@ Sets the direction in which the specified animation plays.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \| -1. | | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set. | | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
- Example - Example
```ts
```
lottie.setDirection(-1, this.animateName) lottie.setDirection(-1, this.animateName)
``` ```
...@@ -238,24 +234,24 @@ Sets the direction in which the specified animation plays. ...@@ -238,24 +234,24 @@ Sets the direction in which the specified animation plays.
Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows: Defines an **AnimationItem** object, which is returned by the **loadAnimation** interface and has attributes and interfaces. The attributes are described as follows:
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | ----------------- | ---------------------------------------- | ---------------------------------------- |
| name | string | Animation name. | | name | string | Animation name. |
| isLoaded | boolean | Whether the animation is loaded. | | isLoaded | boolean | Whether the animation is loaded. |
| currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points. | | currentFrame | number | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points.|
| currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. | | currentRawFrame | number | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0. |
| firstFrame | number | First frame of the animation segment that is being played. | | firstFrame | number | First frame of the animation segment that is being played. |
| totalFrames | number | Total number of frames in the animation segment that is being played. | | totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). | | frameRate | number | Frame rate (frame/s). |
| frameMult | number | Frame rate (frame/ms). | | frameMult | number | Frame rate (frame/ms). |
| playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | | playSpeed | number | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). | | playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). |
| playCount | number | Number of times the animation plays. | | playCount | number | Number of times the animation plays. |
| isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. | | isPaused | boolean | Whether the current animation is paused. The value **true** means that the animation is paused. |
| autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing. | | autoplay | boolean | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** interface needs to be called to start playing.|
| loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. | | loop | boolean \| number | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays. |
| renderer | any | Animation rendering object, which depends on the rendering type. | | renderer | any | Animation rendering object, which depends on the rendering type. |
| animationID | string | Animation ID. | | animationID | string | Animation ID. |
| timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**. | | timeCompleted | number | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**.|
| segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. | | segmentPos | number | ID of the current animation segment. The value is a positive integer greater than or equal to 0. |
| isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. | | isSubframeEnabled | boolean | Whether the precision of **currentFrame** is a floating point number. |
| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. | | segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
...@@ -269,12 +265,11 @@ Plays an animation. ...@@ -269,12 +265,11 @@ Plays an animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null.|
- Example - Example
```ts
```
this.animateItem.play() this.animateItem.play()
``` ```
...@@ -287,12 +282,11 @@ Destroys an animation. ...@@ -287,12 +282,11 @@ Destroys an animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null.|
- Example - Example
```ts
```
this.animateItem.destroy() this.animateItem.destroy()
``` ```
...@@ -305,12 +299,11 @@ Pauses an animation. When the **play** interface is called next time, the animat ...@@ -305,12 +299,11 @@ Pauses an animation. When the **play** interface is called next time, the animat
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null.|
- Example - Example
```ts
```
this.animateItem.pause() this.animateItem.pause()
``` ```
...@@ -323,12 +316,11 @@ Pauses or plays an animation. This method is equivalent to the switching between ...@@ -323,12 +316,11 @@ Pauses or plays an animation. This method is equivalent to the switching between
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null.|
- Example - Example
```ts
```
this.animateItem.togglePause() this.animateItem.togglePause()
``` ```
...@@ -341,12 +333,11 @@ Stops an animation. When the **play** interface is called next time, the animati ...@@ -341,12 +333,11 @@ Stops an animation. When the **play** interface is called next time, the animati
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null.|
- Example - Example
```ts
```
this.animateItem.stop() this.animateItem.stop()
``` ```
...@@ -359,12 +350,11 @@ Sets the playback speed of an animation. ...@@ -359,12 +350,11 @@ Sets the playback speed of an animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is **1.0** or **-1.0**, the animation plays at the normal speed. | | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|
- Example - Example
```ts
```
this.animateItem.setSpeed(5); this.animateItem.setSpeed(5);
``` ```
...@@ -377,12 +367,11 @@ Sets the playback direction of an animation. ...@@ -377,12 +367,11 @@ Sets the playback direction of an animation.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br/>**AnimationDirection**: 1 \| -1. | | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
- Example - Example
```ts
```
this.animateItem.setDirection(-1) this.animateItem.setDirection(-1)
``` ```
...@@ -395,14 +384,13 @@ Sets the animation to stop at the specified frame or time. ...@@ -395,14 +384,13 @@ Sets the animation to stop at the specified frame or time.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**. | | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
- Example - Example
```ts
```
// Set the animation to stop at the specified frame. // Set the animation to stop at the specified frame.
this.animateItem.goToAndStop(25, true) this.animateItem.goToAndStop(25, true)
// Set the animation to stop at the specified time progress. // Set the animation to stop at the specified time progress.
...@@ -412,20 +400,19 @@ Sets the animation to stop at the specified frame or time. ...@@ -412,20 +400,19 @@ Sets the animation to stop at the specified frame or time.
## AnimationItem.goToAndPlay ## AnimationItem.goToAndPlay
goToAndPlay( value: number, isFrame: boolean, name?: string): void goToAndPlay(value: number, isFrame: boolean, name?: string): void
Sets the animation to start from the specified frame or time progress. Sets the animation to start from the specified frame or time progress.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**. | | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
- Example - Example
```ts
```
// Set the animation to stop at the specified frame. // Set the animation to stop at the specified frame.
this.animateItem.goToAndPlay(25, true) this.animateItem.goToAndPlay(25, true)
// Set the animation to stop at the specified time progress. // Set the animation to stop at the specified time progress.
...@@ -441,13 +428,12 @@ Sets the animation to play only the specified segment. ...@@ -441,13 +428,12 @@ Sets the animation to play only the specified segment.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br/>If all segments in the segment list are played, only the last segment is played in the next cycle. | | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
- Example - Example
```ts
```
// Set the animation to play the specified segment. // Set the animation to play the specified segment.
this.animateItem.playSegments([10, 20], false) this.animateItem.playSegments([10, 20], false)
// Set the animation to play the specified segment list. // Set the animation to play the specified segment list.
...@@ -463,12 +449,11 @@ Resets the settings configured by the **playSegments** method to play all the fr ...@@ -463,12 +449,11 @@ Resets the settings configured by the **playSegments** method to play all the fr
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
- Example - Example
```ts
```
this.animateItem.resetSegments(true) this.animateItem.resetSegments(true)
``` ```
...@@ -480,8 +465,7 @@ resize(): void ...@@ -480,8 +465,7 @@ resize(): void
Resizes the animation layout. Resizes the animation layout.
- Example - Example
```ts
```
this.animateItem.resize() this.animateItem.resize()
``` ```
...@@ -494,12 +478,11 @@ Sets the precision of the **currentFrame** attribute to display floating-point n ...@@ -494,12 +478,11 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br/>**true**: The **currentFrame** attribute displays floating-point numbers.<br/>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers. | | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
- Example - Example
```ts
```
this.animateItem.setSubframe(false) this.animateItem.setSubframe(false)
``` ```
...@@ -512,12 +495,11 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for ...@@ -512,12 +495,11 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames. **true**: number of frames. **false**: duration, in ms. The default value is **false**. | | inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms. The default value is **false**.|
- Example - Example
```ts
```
this.animateItem.getDuration(true) this.animateItem.getDuration(true)
``` ```
...@@ -530,13 +512,12 @@ Adds an event listener. After the event is complete, the specified callback func ...@@ -530,13 +512,12 @@ Adds an event listener. After the event is complete, the specified callback func
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br/>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. | | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
- Example - Example
```ts
```
private callbackItem: any = function() { private callbackItem: any = function() {
console.log("grunt loopComplete") console.log("grunt loopComplete")
} }
...@@ -555,13 +536,12 @@ Removes an event listener. ...@@ -555,13 +536,12 @@ Removes an event listener.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br/>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images' | | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | | callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
- Example - Example
```ts
```
this.animateItem.removeEventListener('loopComplete', this.animateName) this.animateItem.removeEventListener('loopComplete', this.animateName)
``` ```
...@@ -574,13 +554,12 @@ Directly triggers all configured callbacks of a specified event. ...@@ -574,13 +554,12 @@ Directly triggers all configured callbacks of a specified event.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. | | name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters. | | args | any | Yes | Custom callback parameters.|
- Example - Example
```ts
```
private triggerCallBack: any = function(item) { private triggerCallBack: any = function(item) {
console.log("trigger loopComplete, name:" + item.name) console.log("trigger loopComplete, name:" + item.name)
} }
......
en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ 492981fb
# Page Transition # Page Transition
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method. The page transition navigates users between pages. You can customize page transitions by configuring the page entrance and exit components in the global **pageTransition** API.
> **NOTE** > **NOTE**
> >
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
| Name | Parameter | Description | | Name | Parameter | Description |
| -------- | -------- | -------- | | ------------------- | ------ | ------------------------------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. | | PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. | | PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.|
- Animation parameters - Animation parameters
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. | | type | RouteType | - | No | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used. |
| duration | number | 1000 | No | Animation duration, in ms. | | duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. | | curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).|
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. | | delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums - RouteType enums
| Name | Description | | Name| Description |
| -------- | -------- | | ---- | ---------------- |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. | | Pop | Redirects to a specified page. When the user is redirected from page A to page B, page A is Exit+Push, and page B is Enter+Push.|
| Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. | | Push | Redirects to the next page. When the user is redirected back from page B to page A, page A is Enter+Pop, and page B is Exit+Pop.|
## Attributes ## Attributes
The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes: The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes:
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. | | slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<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. | | 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.|
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. | | 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. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. | | opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums - SlideEffect enums
| Name | Description | | Name | Description |
| -------- | -------- | | ------ | ------------------------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. | | Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. | | Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. | | Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. | | Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
## Events ## Events
The PageTransitionEnter and PageTransitionExit components support the following events: The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
| Event | Description | | Name | Description |
| -------- | -------- | | ---------------------------------------- | ----------------------------------- |
| onEnter(type: RouteType, progress: number) =&gt; void | Callback invoked when page entrance occurs. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. | | onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.|
| onExit(type: RouteType, progress: number) =&gt; void | Callback invoked when page exit occurs. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. | | onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.|
## Example ## 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. Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out.
```ts
```
// index.ets // index.ets
@Entry @Entry
@Component @Component
struct PageTransitionExample1 { struct PageTransitionExample1 {
@State scale1: number = 1 @State scale1: number = 1
@State opacity1: number = 1 @State opacity1: number = 1
@State active: boolean = false
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%") Image($r('app.media.bg1')).width("100%").height("100%")
} }
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale1 }).opacity(this.opacity1) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
// Customization method 1: Customize the transition process. // Customization method 1: Customize the transition process.
...@@ -100,15 +94,14 @@ struct PageTransitionExample1 { ...@@ -100,15 +94,14 @@ struct PageTransitionExample1 {
} }
``` ```
```ts
```
// page1.ets // page1.ets
@Entry @Entry
@Component @Component
struct AExample { struct AExample {
@State scale2: number = 1 @State scale2: number = 1
@State opacity2: number = 1 @State opacity2: number = 1
@State active: boolean = false
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
...@@ -127,7 +120,7 @@ struct AExample { ...@@ -127,7 +120,7 @@ struct AExample {
.onExit((type: RouteType, progress: number) => { .onExit((type: RouteType, progress: number) => {
this.scale2 = 1 - progress this.scale2 = 1 - progress
this.opacity2 = 1 this.opacity2 = 1
}) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%). }) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
} }
} }
``` ```
...@@ -136,23 +129,19 @@ struct AExample { ...@@ -136,23 +129,19 @@ struct AExample {
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. 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.
``` ```ts
// index.ets // index.ets
@Entry @Entry
@Component @Component
struct PageTransitionExample { struct PageTransitionExample {
@State scale1: number = 1 @State scale1: number = 1
@State opacity1: number = 1 @State opacity1: number = 1
@State active: boolean = false
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) { Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
Image($r('app.media.bg1')).width("100%").height("100%") Image($r('app.media.bg1')).width("100%").height("100%")
} }
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale1 }).opacity(this.opacity1) }.scale({ x: this.scale1 }).opacity(this.opacity1)
} }
...@@ -167,23 +156,19 @@ struct PageTransitionExample { ...@@ -167,23 +156,19 @@ struct PageTransitionExample {
} }
``` ```
``` ```ts
// page1.ets // page1.ets
@Entry @Entry
@Component @Component
struct PageTransitionExample1 { struct PageTransitionExample1 {
@State scale2: number = 1 @State scale2: number = 1
@State opacity2: number = 1 @State opacity2: number = 1
@State active: boolean = false
build() { build() {
Column() { Column() {
Navigator({ target: 'pages/index', type: NavigationType.Push }) { Navigator({ target: 'pages/index', type: NavigationType.Push }) {
Image($r('app.media.bg2')).width ("100%").height("100%") Image($r('app.media.bg2')).width ("100%").height("100%")
} }
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale2 }).opacity(this.opacity2) }.scale({ x: this.scale2 }).opacity(this.opacity2)
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或