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
| 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"**. |
| 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"**. |
| 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**. |
| 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. |
| 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. |
| 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. |
| 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. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy
...
...
@@ -48,12 +48,12 @@ destroy(name: string): void
Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
- 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
```
import lottie from 'lottie-web'
...
...
@@ -128,12 +128,12 @@ play(name: string): void
Plays a specified animation.
- 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
```
lottie.play(this.animateName)
```
...
...
@@ -146,12 +146,12 @@ pause(name: string): void
Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
- 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. |
Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
- 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
```
lottie.togglePause(this.animateName)
```
...
...
@@ -182,12 +182,12 @@ stop(name: string): void
Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
- 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. |
Sets the playback speed of the specified animation.
- 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. |
| 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. |
| 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. |
| 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. |
Sets the direction in which the specified animation plays.
- 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. |
| 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. |
| 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. |
- Example
```
lottie.setDirection(-1, this.animateName)
```
...
...
@@ -235,28 +235,28 @@ 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:
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| name | string | Animation name. |
| 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. |
| 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. |
| totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). |
| 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. |
| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). |
| 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. |
| 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. |
| renderer | any | Animation rendering object, which depends on the rendering type. |
| 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**. |
| 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. |
| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
| name | string | Animation name. |
| 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. |
| 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. |
| totalFrames | number | Total number of frames in the animation segment that is being played. |
| frameRate | number | Frame rate (frame/s). |
| 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. |
| playDirection | number | Playback direction. The options are **1** (forward) and **-1** (backward). |
| 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. |
| 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. |
| renderer | any | Animation rendering object, which depends on the rendering type. |
| 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**. |
| 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. |
| segments | AnimationSegment \| AnimationSegment[] | Current segment of the animation. |
## AnimationItem.play
...
...
@@ -266,12 +266,12 @@ play(name?: string): void
Plays an animation.
- 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. |
| 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 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. |
| 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
```
this.animateItem.setDirection(-1)
```
...
...
@@ -387,19 +387,19 @@ Sets the playback direction of an animation.
Sets the animation to stop at the specified frame or time.
- 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. |
| 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. |
| 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**. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
```
// Set the animation to stop at the specified frame.
this.animateItem.goToAndStop(25, true)
...
...
@@ -410,19 +410,19 @@ Sets the animation to stop at the specified frame or time.
Sets the animation to start from the specified frame or time progress.
- 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. |
| 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. |
| 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**. |
| name | string | No | Name of the target animation. By default, the value is null. |
- Example
```
// Set the animation to stop at the specified frame.
Sets the animation to play only the specified segment.
- 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. |
| 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. |
| 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. |
- Example
```
// Set the animation to play the specified segment.
Resets the settings configured by the **playSegments** method to play all the frames.
- 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. |
Sets the precision of the **currentFrame** attribute to display floating-point numbers.
- 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. |
Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** interface.
- 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. **true**: number of frames. **false**: duration, in ms. The default value is **false**. |
Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener.
- 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<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
| 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<T> | Yes | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
| path | Object | Yes | null | Path to be added to this path. |
| path | Object | Yes | null | Path to be added to this path. |
- Example
```
@Entry
@Component
...
...
@@ -58,7 +58,7 @@ closePath(): void
Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
| x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
| x | number | Yes | 0 | X-coordinate of the ellipse center. |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
| next | boolean | Yes | - | Whether to turn to the next page. The value **true** means to scroll to the next page, and the value **false** means to scroll to the previous page. |
| value | number | Yes | - | Index of the item to be scrolled to in the list. |
| value | number | Yes | - | Index of the item to be scrolled to in the list. |
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. |
| onScrollEnd() => void | Invoked when scrolling stops. |
| onScroll(xOffset: number, yOffset: number) => void | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
| onScrollEdge(side: Edge) => void | Callback for the event of scrolling to the edge. |
| onScrollEnd() => void | Invoked when scrolling stops. |
