Ohos Lottie

https://ohpm.openharmony.cn/help
Admin
Ohos Lottie is an animation library for OpenHarmony that parses and renders Adobe After Effects...
Tokens:12,057
Snippets:95
Trust Score:8.3
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Lottie Library

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use this command to install the Lottie library via ohpm. This is the recommended way to add the library to your project.

```bash
__ohpm i @ohos/lottie __

```

--------------------------------

### Install @ohos/lottie Package

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use the ohpm command-line tool to install the lottie library for your OpenHarmony project.

```bash
ohpm install @ohos/lottie
```

--------------------------------

### Complete Lottie Animation Usage Example

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

This example demonstrates how to load and render a Lottie animation on a Canvas component. It includes setup for the rendering context, animation loading, event handling for 'DOMLoaded', and resource cleanup.

```typescript
import lottie, { AnimationItem } from '@ohos/lottie';

@Entry
@Component
struct Index {
  // 构建上下文
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);
  private animateItem: AnimationItem | null = null;
  private animateName: string = 'animation'; 

  // 页面销毁时释放动画资源
  aboutToDisappear(): void {
    console.info('aboutToDisappear');
    lottie.destroy();
  }

  build() {
    Row() {
      // 关联画布
      Canvas(this.canvasRenderingContext)
        .width(200)
        .height(200)
        .backgroundColor(Color.Gray)
        .onReady(() => {
          // 加载动画
          if (this.animateItem != null) {
            // 可在此生命回调周期中加载动画，可以保证动画尺寸正确
            this.animateItem?.resize();
          } else {
            // 抗锯齿的设置
            this.canvasRenderingContext.imageSmoothingEnabled = true;
            this.canvasRenderingContext.imageSmoothingQuality = 'medium';
            this.loadAnimation();
          }
        })
    }
  }

  loadAnimation() {
    this.animateItem = lottie.loadAnimation({
      container: this.canvasRenderingContext,
      renderer: 'canvas', // canvas 渲染模式
      loop: true,
      autoplay: false,
      name: this.animateName,
      contentMode: 'Contain',
      path: 'common/animation.json',
    })
    // 因为动画是异步加载，所以对animateItem的操作需要放在动画加载完成回调里操作
    this.animateItem.addEventListener('DOMLoaded', (args: Object): void => {
      this.animateItem.changeColor([225, 25, 100, 1]);
      this.animateItem.play();
    });
  }

  destroy() {
    this.animateItem.removeEventListener('DOMLoaded');
    lottie.destroy(this.animateName);
    this.animateItem = null;
  }
}

```

--------------------------------

### Play Lottie Animation

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `play()` to start all animations or `animationItem.play()` to play a specific animation instance. Ensure the animation is loaded before calling play.

```javascript
lottie.play(); //所有动画播放
```

```javascript
animationItem.play(); //当前指定animationItem动画播放
```

--------------------------------

### Go To Frame/Time and Play

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `goToAndPlay(value, isFrame)` to start playing the animation from a specific frame or time. Set `isFrame` to `true` for frames, `false` (or omit) for milliseconds.

```javascript
animationItem.goToAndPlay(250,true);
```

```javascript
animationItem.goToAndPlay(12000,false);
```

--------------------------------

### Get Animation Duration/Frame Count

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Retrieve the total duration or frame count of the animation using `getDuration()`. Pass `true` to get the frame count, or `false` (or omit) to get the duration in milliseconds.

```javascript
animationItem.getDuration();
```

--------------------------------

### Set Animation Segment

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Define a specific range for animation playback using `setSegment(start, end)`. This limits the animation to play only between the specified start and end frames.

```javascript
animationItem.setSegment(5,15);
```

--------------------------------

### Reset Animation Segments

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Reset the animation to play the full duration from the beginning using `resetSegments(start, end)`. The `forceFlag` determines if the reset takes effect immediately (`true`) or on the next loop (`false`).

```javascript
animationItem.resetSegments(5,15);
```

--------------------------------

### Import Lottie Module

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Import the lottie library at the beginning of your component file to make its functionalities available.

```typescript
import lottie from '@ohos/lottie';
```

--------------------------------

### Configure Canvas for Lottie Animations

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Set up the canvas component with desired dimensions, background color, and enable anti-aliasing for smoother animations. Ensure the canvas aspect ratio matches the animation's aspect ratio.

```typescript
Canvas(this.mainCanvasRenderingContext)
        .width('50%')
        .height(360 + 'px')
        .backgroundColor(Color.Gray)
        .onReady(()=>{
        //抗锯齿的设置
            this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
            this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium';
        })
```

--------------------------------

### Load Lottie Animation from Network URI

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Load a Lottie animation from a network URL. This requires the `ohos.permission.INTERNET` and `ohos.permission.GET_NETWORK_INFO` permissions. The animation will be rendered on the specified canvas context.

```typescript
lottie.loadAnimation({
            uri: "https://assets7.lottiefiles.com/packages/lf20_sF7uci.json",  // uri网络资源
            container: this.canvasRenderingContext,                            // 渲染上下文
            renderer: 'canvas',                                                // canvas 渲染模式
            loop: true,                                                        // 是否循环播放,默认true
            autoplay: true,                                                    // 是否自动播放，默认true
            name: this.animateName,                                            // 动画名
          })
```

--------------------------------

### Event Handling and Customization

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Add and remove event listeners, change animation colors, and resize the animation.

```APIDOC
## Add Event Listener

### Description
Adds an event listener to the animation. The callback function must be the same for adding and removing.

### Method
`addEventListener(eventName: AnimationEventName, callback: Function)`

### Parameters
- `eventName` (AnimationEventName): The name of the event to listen for. Possible values include: 'drawnFrame', 'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'.
- `callback` (Function): The function to execute when the event is triggered.

### Usage
```javascript
AnimationEventName = 'drawnFrame' | 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error' | 'data_failed' | 'loaded_images';

animationItem.addEventListener("enterFrame", function(){
    // TODO something
});
```

## Change Color

### Description
Modifies the rendering color of the animation. You can change the color of the entire animation or specific layers and elements within it.

### Method
`changeColor(color: Array<number>, layerIndex?: number, elementIndex?: number)`

### Parameters
- `color` (Array<number>): An array representing the RGB/RGBA color value (e.g., `[255, 150, 203, 0.8]`).
- `layerIndex` (number, optional): The index of the animation layer to modify. If omitted, the entire animation's color is changed.
- `elementIndex` (number, optional): The index of the element within the specified layer to modify. If omitted, all elements in the layer are affected.

### Usage
- `animationItem.changeColor([255, 150, 203, 0.8]);` // Modifies the color of the entire animation.
- `animationItem.changeColor([255, 150, 203, 0.8], 2);` // Modifies the color of the second layer.
- `animationItem.changeColor([255, 150, 203, 0.8], 2, 2);` // Modifies the color of the second element in the second layer.

## Remove Event Listener

### Description
Removes a previously added event listener.

### Method
`removeEventListener(eventName: AnimationEventName, callback: Function)`

### Parameters
- `eventName` (AnimationEventName): The name of the event listener to remove.
- `callback` (Function): The callback function that was originally added.

### Usage
```javascript
animationItem.removeEventListener("enterFrame", function(){
    // TODO something
});
```

## Resize Animation

### Description
Refreshes the animation layout, typically used after resizing the container.

### Method
`resize()`

### Usage
- `animationItem.resize();`

## Set Content Mode

### Description
Sets the content mode for how the animation is scaled and fitted within its container. Available modes are 'Fill', 'Cover', 'Top', 'Bottom', 'Contain'.

### Method
`setContentMode(mode: 'Fill' | 'Cover' | 'Top' | 'Bottom' | 'Contain')`

### Parameters
- `mode` (string): The content mode to apply. Defaults to 'Contain'.

### Usage
- `animationItem.setContentMode('Cover');`

## Set Frame Rate

### Description
Sets the frame rate at which the animation is rendered. Higher frame rates consume more power.

### Method
`setFrameRate(frameRate: number)`

### Parameters
- `frameRate` (number): The desired frame rate, between 1 and 120.

### Usage
- `animationItem.setFrameRate(30);`
```

--------------------------------

### LottiePlayer API

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Provides a list of methods for the main LottiePlayer interface, including animation loading, control, and utility functions.

```APIDOC
## LottiePlayer API

| Method Signature              | Parameters                                         | Description                                                                                                |
|-------------------------------|----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
| `play()`                      | `name?, onlyCurrentAbility?`                       | Play animation                                                                                             |
| `stop()`                      | `name?, onlyCurrentAbility?`                       | Stop animation                                                                                             |
| `pause()`                     | `name?, onlyCurrentAbility?`                       | Pause animation                                                                                            |
| `togglePause()`               | `name?, onlyCurrentAbility?`                       | Toggle pause state                                                                                         |
| `destroy()`                   | `name?, onlyCurrentAbility?`                       | Destroy animation                                                                                          |
| `goToAndStop()`               | `value, isFrame?, name?, onlyCurrentAbility?`      | Go to a specific frame and stop                                                                            |
| `goToAndPlay()`               | `value, isFrame?, name?, onlyCurrentAbility?`      | Go to a specific frame and play                                                                            |
| `setSpeed()`                  | `speed, name?, onlyCurrentAbility?`                | Set playback speed                                                                                         |
| `resize()`                    | `width?, height?, onlyCurrentAbility?`             | Refresh animation layout                                                                                   |
| `setDirection()`              | `direction, name?, onlyCurrentAbility?`            | Set playback direction                                                                                     |
| `setContentMode()`            | `contentMode, name?, onlyCurrentAbility?`          | Set content mode                                                                                           |
| `loadAnimation()`             | `params`                                           | Load animation                                                                                             |
| `setFrameRate()`              | `frameRate`                                        | Set animation frame rate                                                                                   |
| `clearFileCache()`            | `url?, container?`                                 | Clear cached animation files downloaded via network                                                        |
| `bindContext2dToCoordinator()`| `CanvasRenderingContext2D`                         | Track dynamic relationships between Lottie animation, `CanvasRenderingContext2D`, and `Canvas`.            |
| `unbindContext2dFromCoordinator()`| `CanvasRenderingContext2D`                         | Release tracking relationship.                                                                             |
| `setAttachedCanvasHasVisibleArea()`| `CanvasRenderingContext2D, boolean`                | Forcefully correct the canvas node status associated with `context2d`.                                     |
```

--------------------------------

### Lottie Library Directory Structure

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

This is the standard directory structure for the Lottie library project. The core animation logic is located within the `library/src/main/js` directory.

```plaintext
/lottie        # 项目根目录
├── entry      # 示例代码文件夹
├── library    # lottie库文件夹
│    └─ src/main/js   # 核心代码，包含json解析，动画绘制，操作动画
│          └─ 3rd_party    
│          └─ animation    
│          └─ effects      
│          └─ elements      
│          └─ modules
│          └─ renderers    
│          └─ utils
│          └─ EffectsManager.js  
│          └─ main.js
│          └─ mask.js
│       └─index.d.ts                
├── README.md     # 安装使用方法    
├── README_zh.md  # 安装使用方法                    

```

--------------------------------

### Invisible Area Drawing Optimization

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

This section explains how Lottie supports skipping drawing for animations in invisible areas to reduce redundant rendering. It introduces the `coordinator` object for managing the dynamic relationship between Lottie animations, CanvasRenderingContext2D, and Canvas. Drawing is only performed when the associated canvas is visible. It also covers compatibility handling and the `setAttachedCanvasHasVisibleArea` interface for developers to manually correct canvas visibility status.

```APIDOC
## Invisible Area Drawing Optimization

Lottie supports skipping drawing for animations when they are in invisible areas, reducing redundant rendering (supported in API 13 and above).

### Key Concepts:
- **Coordinator Object**: Tracks the dynamic relationship between Lottie animations, `CanvasRenderingContext2D`, and `Canvas`.
- **Visibility Check**: Drawing is performed only when the `CanvasRenderingContext2D` is associated with a visible canvas.
- **Compatibility Handling**: Default drawing behavior if `bindContext2dToCoordinator` is not explicitly called.
- **`setAttachedCanvasHasVisibleArea`**: Allows developers to manually force the visibility status of the canvas associated with a `context2d`.

### Usage Example:
1. Use `Canvas` + `lottie.loadAnimation`.
2. Call `bindContext2dToCoordinator` after creating the `CanvasRenderingContext2D` and before it's referenced by the canvas.
3. Call `unbindContext2dFromCoordinator` when the page is destroyed.

```javascript
import lottie from '@ohos/lottie';

@Entry
@Component
struct InvisibleAreaAutoPlay {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvas2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  aboutToAppear(): void {
    lottie.bindContext2dToCoordinator(this.canvas2D);
  }

  aboutToDisappear(): void {
    lottie.unbindContext2dFromCoordinator(this.canvas2D);
    lottie.destroy('robotYoga');
  }

  build() {
    Stack() {
      Canvas(this.canvas2D)
        .width(300)
        .height(300)
        .backgroundColor(Color.Gray)
        .onReady(() => {
          lottie.loadAnimation({
            container: this.canvas2D,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            contentMode: 'Contain',
            name: 'robotYoga',
            path: 'common/lottie/robotYoga.json'
          })
        })
    }.height('40%')
      .width('100%')
      .backgroundColor(Color.Gray)
  }
}
```
```

--------------------------------

### Lottie Library Obfuscation Rule

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

To prevent the Lottie library from being obfuscated during the build process, add the specified exclusion rule to your obfuscation configuration file.

```plaintext
-keep
./oh_modules/@ohos/lottie

```

--------------------------------

### Load Lottie Animation in HSP Scene

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

For HSP scenarios, load Lottie animations using the `animationData` parameter. The JSON animation resource file must be placed in the `rawfile` directory for loading. This method ensures compatibility within the HSP environment.

```typescript
lottie.loadAnimation({
            container: this.mainCanvasRenderingContext,  // 渲染上下文
            renderer: 'canvas',                          // 渲染方式
            loop: true,                                  // 是否循环播放,默认true
            autoplay: true,                              // 是否自动播放，默认true
            animationData: this.jsonData,                // json对象数据
            contentMode: 'Contain',                      // 填充的模式
            initialSegment: [10,50]                      // 播放的动画片段
          })
```

--------------------------------

### AnimationItem API

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Provides a list of methods available for controlling individual Lottie animation instances.

```APIDOC
## AnimationItem API

| Method Signature        | Parameters                               | Description                     |
|-------------------------|------------------------------------------|---------------------------------|
| `play()`                | `name?`                                  | Play animation                  |
| `stop()`                | `name?`                                  | Stop animation                  |
| `pause()`               | `name?`                                  | Pause animation                 |
| `togglePause()`         | `name?`                                  | Toggle pause state              |
| `destroy()`             | `name?`                                  | Destroy animation               |
| `goToAndStop()`         | `value, isFrame?, name?`                 | Go to a specific frame and stop |
| `goToAndPlay()`         | `value, isFrame?, name?`                 | Go to a specific frame and play |
| `setSegment()`          | `init, end`                              | Set animation segment           |
| `playSegments()`        | `arr, forceFlag`                         | Play specified segments         |
| `resetSegments()`       | `forceFlag`                              | Reset segments                  |
| `setSpeed()`            | `speed`                                  | Set playback speed              |
| `resize()`              | `width?, height?`                        | Refresh animation layout        |
| `setDirection()`        | `direction`                              | Set playback direction          |
| `getDuration()`         | `isFrames?`                              | Get animation duration          |
| `addEventListener()`    | `eventName, callback`                    | Add event listener              |
| `removeEventListener()` | `name, callback?`                        | Remove event listener           |
| `changeColor()`         | `color, layer?, index?`                  | Change animation color          |
| `setContentMode()`      | `contentMode`                            | Set content mode                |
| `setFrameRate()`        | `frameRate`                              | Set animation frame rate        |
```

--------------------------------

### New Features

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Highlights new features and enhancements in the Lottie library, including color modification, mask/matte support, Gaussian blur, external image loading, content mode settings, frame rate control, network resource loading, and automatic pausing for hidden animations.

```APIDOC
## New Features

1.  **Color Modification in Canvas Rendering**: Supports modifying animation colors in canvas rendering mode.
    *   Supports RGB format colors.
    *   Supports RGBA format colors.
    *   Supports setting start keyframe colors.

2.  **Masks/Mattes Support in Canvas Rendering**: Supports certain mask/matte features in canvas rendering mode.
    *   Mask mode supports `mode = a`, `mode = s`, `mode = f`.
    *   Matte mode supports `tt = 1`, `tt = 2`.

3.  **Gaussian Blur Effect in Canvas Rendering**: Supports Gaussian blur effects in canvas rendering mode.

4.  **Loading External Resource Images in Canvas Rendering**: Supports loading external resource images.
    *   Supports loading external resource images from sandbox paths (priority search path).
    *   Supports loading external resource images from the `rawfile` directory.

5.  **Setting Content Mode**: Supports setting the fill mode for animations.
    *   `Fill`: Stretch fill (may be stretched, not cropped).
    *   `Top`: Equal proportion fill - top alignment (not cropped, long side alignment).
    *   `Bottom`: Equal proportion fill - bottom alignment (not cropped, long side alignment).
    *   `Cover`: Equal proportion scaling fill (may be cropped, short side alignment).
    *   `Contain`: Equal proportion fill - vertical center alignment (not cropped, long side alignment).

6.  **Setting Animation Frame Rate**: Supports setting the frame rate for the animation animator.

7.  **Loading Network Resources and Animations via URI Path**: Supports loading network resources and animations via URI paths.
    *   Supports rendering animations by specifying resource paths via URI.
    *   Supports rendering animations based on online resources.
    *   Note: If the Lottie file contains network resources, the permissions `ohos.permission.INTERNET` and `ohos.permission.GET_NETWORK_INFO` must be applied for.

8.  **Automatic Pausing for Hidden Animations**: When an animation is in a hidden state or completely invisible, it will automatically pause sending drawing instructions to the canvas layer, optimizing performance and reducing power consumption.
```

--------------------------------

### Initialize Canvas Rendering Context

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Create a rendering context for the Canvas component, which is necessary for drawing the animation.

```typescript
  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings);
```

--------------------------------

### Set Lottie Animation Direction

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Control the playback direction with `setDirection(direction)`. Use `1` for forward and `-1` for reverse.

```javascript
lottie.setDirection(1); //所有动画设置播放方向
```

```javascript
animationItem.setDirection(1); //当前指定animationItem动画设置播放方向
```

--------------------------------

### Read Animation JSON from Rawfile in HSP

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Read Lottie animation JSON content from the `rawfile` directory within an HSP application. This involves creating a module context, accessing the resource manager, and decoding the raw file content into a JSON object. Error handling is included for robustness.

```typescript
try {
      application.createModuleContext(getContext(this), 'sharedLibrary').then((data: Context) => {
        this.moduleContext = data;
        this.moduleContext?.resourceManager.getRawFileContent('animation.json',(err: Error,data: Uint8Array) =>{
          if(data === null || data === undefined || data.buffer=== undefined){
            return;
          }
          let resStr = util.TextDecoder.create('utf-8',{ignoreBOM: true});
          let lottieStr = resStr.decodeToString(new Uint8Array(data.buffer));
          this.mLottieData = JSON.parse(lottieStr);
        })
      }).catch((error: BusinessError) => {
      })
    } catch (error) {
    }
```

--------------------------------

### Calling Animation Methods Before Load

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Calling animation methods like changeColor or setContentMode before the Lottie animation is fully loaded can lead to ineffective settings. Use the 'DOMLoaded' event listener to ensure these methods are called after the animation is ready.

```javascript
// 动画未加载完成，changeColor和setContentMode设置无效
Button('加载2016')
    .onClick(() => {
      if (this.animationItem2 == null) {
        this.animationItem2 = lottie.loadAnimation({
          container: this.canvasRenderingContext,
          renderer: 'canvas', // canvas 渲染模式
          name: '2016',
          path: 'common/lottie/data.json', 
        })
        this.animationItem2.changeColor([255,150,203,0.8]);
        this.animationItem2.setContentMode('Top');
      }
    })
        
```

```javascript
// animationItem.addEventListener('DOMLoaded')监听后执行方法，changeColor和setContentMode设置有效
Button('加载2016')
  .onClick(() => {
    if (this.animationItem2 == null) {
      this.animationItem2 = lottie.loadAnimation({
        container: this.canvasRenderingContext,
        renderer: 'canvas', // canvas 渲染模式
        loop: true,
        autoplay: false,
        name: '2016',
        contentMode: 'Contain',
        path: 'common/lottie/data.json',
      })
  
      this.animationItem2.addEventListener('DOMLoaded', (args: Object): void => {
        this.animationItem2?.changeColor([255,150,203,0.8]);
        // this.animationItem2?.setContentMode('Top');
        // ...
      }); //动画加载完成，播放之前触发
    }
  })


```

--------------------------------

### Load Lottie Animation from Local Path

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Load a Lottie animation using its local file path. Before loading a new animation, destroy any existing animation on the same canvas using `lottie.destroy('name')`. This method supports specifying animation segments and frame rates.

```typescript
lottie.destroy('2016'); //加载动画前先销毁之前加载的动画
    this.animationItem = lottie.loadAnimation({
            container: this.mainCanvasRenderingContext,  // 渲染上下文
            renderer: 'canvas',                          // 渲染方式
            loop: true,                                  // 是否循环播放,默认true
            autoplay: true,                              // 是否自动播放，默认true
            name: '2016',                                // 动画名称
            contentMode: 'Contain',                      // 填充的模式
            frameRate: 30,                               //设置animator的刷帧率为30
            imagePath: 'lottie/images/',                 // 加载读取指定路径下的图片资源
            path: this.path,                             // json路径
            initialSegment: [10,50]                      // 播放的动画片段
          })
```

--------------------------------

### Set Lottie Animation Speed

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Adjust the playback speed using `setSpeed(speed)`. A positive value plays forward, negative plays backward, zero pauses, and 1.0/-1.0 is normal speed.

```javascript
lottie.setSpeed(1); //所有动画设置播放速度
```

```javascript
animationItem.setSpeed(1); //当前指定animationItem动画设置播放速度
```

--------------------------------

### Specify Animation JSON File Path or Data

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Define the path to your Lottie animation JSON file or provide the JSON data directly. Ensure the path is correctly formatted and accessible.

```typescript
  private path:string = "common/lottie/data.json";
  或
  private jsonData:string = {"v":"4.6.6","fr":24,"ip":0,"op":72,"w":1000,"h":1000,"nm":"Comp 2","ddd":0,"assets":[],...};
```

--------------------------------

### Speed and Direction

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Adjust the playback speed and direction of animations.

```APIDOC
## Set Playback Speed

### Description
Sets the playback speed of the animation. Positive values play forward, negative values play backward, and zero pauses.

### Method
`setSpeed(speed: number)`

### Parameters
- `speed` (number): The playback speed. `1` is normal speed, `0` pauses, `>0` forward, `<0` backward.

### Usage
- `lottie.setSpeed(1);` // Sets playback speed for all animations.
- `animationItem.setSpeed(1);` // Sets playback speed for a specific animation item.

## Set Playback Direction

### Description
Sets the playback direction of the animation.

### Method
`setDirection(direction: 1 | -1)`

### Parameters
- `direction` (number): The playback direction. `1` for forward, `-1` for backward.

### Usage
- `lottie.setDirection(1);` // Sets playback direction for all animations.
- `animationItem.setDirection(1);` // Sets playback direction for a specific animation item.
```

--------------------------------

### Preventing Animation Memory Leaks

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

This section provides guidelines on how to prevent memory leaks when using the Lottie animation library. It advises against using `@state` for animation objects, emphasizes the importance of timely animation destruction, and warns against manually removing 'destroy' listener events.

```APIDOC
## Preventing Animation Memory Leaks

To avoid memory leaks with Lottie animations:

- **Avoid `@state` for Animation Objects**: Using `@state` to decorate animation objects like `animationItem` can prevent animations from being properly destroyed, leading to memory leaks.
- **Timely Animation Destruction**: Actively destroy animations when they are no longer needed or when the page is about to be destroyed. Failure to do so will keep `animationItem` objects alive, causing memory leaks. Use `lottie.destroy(name)` for this purpose.
- **Do Not Manually Clear `destroy` Listeners**: Manually calling `removeEventListener('destroy')` can clear the animation's internal destroy callbacks, preventing `lottie.destroy(name)` from fully releasing resources and causing memory leaks.
```

--------------------------------

### Lottie Log Level Control

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Control the logging level for Lottie animations. Use LogUtil.ON to enable logs and LogUtil.OFF to disable them.

```javascript
 LogUtil.mLogLevel = LogUtil.ON; //打开日志信息
 LogUtil.mLogLevel = LogUtil.OFF; //关闭日志信息

```

--------------------------------

### Animation Lifecycle and Management

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Manage the lifecycle of animations, including destruction, seeking, and segment control.

```APIDOC
## Destroy Animation

### Description
Destroys the animation instance. This should be called when the animation is no longer needed, typically during page unloads.

### Method
`destroy(name?: string)`

### Parameters
- `name` (string, optional): The name of the animation to destroy. If omitted, all animations are destroyed.

### Usage
- `lottie.destroy();` // Destroys all animations.
- `lottie.destroy('animationName');` // Destroys a specific animation by name.

## Go To and Stop

### Description
Moves the animation to a specific frame or time and stops it.

### Method
`goToAndStop(value: number, isFrame?: boolean)`

### Parameters
- `value` (number): The frame number or time in milliseconds.
- `isFrame` (boolean, optional): If `true`, `value` is treated as a frame number. If `false` or omitted, `value` is treated as milliseconds. Defaults to `false`.

### Usage
- `animationItem.goToAndStop(250, true);` // Stops at frame 250.
- `animationItem.goToAndStop(5000, false);` // Stops at 5000ms.

## Go To and Play

### Description
Moves the animation to a specific frame or time and starts playing from there.

### Method
`goToAndPlay(value: number, isFrame?: boolean)`

### Parameters
- `value` (number): The frame number or time in milliseconds.
- `isFrame` (boolean, optional): If `true`, `value` is treated as a frame number. If `false` or omitted, `value` is treated as milliseconds. Defaults to `false`.

### Usage
- `animationItem.goToAndPlay(250, true);` // Plays from frame 250.
- `animationItem.goToAndPlay(12000, false);` // Plays from 12000ms.

## Set Segment

### Description
Limits the animation to play within a specified frame range, defining an animation clip.

### Method
`setSegment(startFrame: number, endFrame: number)`

### Parameters
- `startFrame` (number): The starting frame of the segment.
- `endFrame` (number): The ending frame of the segment.

### Usage
- `animationItem.setSegment(5, 15);`

## Play Segments

### Description
Plays specified segments of the animation. Segments can be played immediately or on the next loop.

### Method
`playSegments(segments: Array<[number, number]>, forceFlag?: boolean)`

### Parameters
- `segments` (Array<[number, number]>): An array of segments, where each segment is a tuple of [startFrame, endFrame].
- `forceFlag` (boolean, optional): If `true`, the segments are played immediately. If `false`, they are played on the next loop. Defaults to `false`.

### Usage
- `animationItem.playSegments([[5, 15], [20, 30]], true);`

## Reset Segments

### Description
Resets the animation segments, allowing the animation to play from the beginning.

### Method
`resetSegments(startFrame?: number, endFrame?: number)`

### Parameters
- `startFrame` (number, optional): The start frame to reset to. If omitted, resets to the beginning.
- `endFrame` (number, optional): The end frame to reset to. If omitted, resets to the end.

### Usage
- `animationItem.resetSegments(5, 15);`

## Get Duration

### Description
Retrieves the duration of the animation, either in frames or milliseconds.

### Method
`getDuration(inFrames?: boolean)`

### Parameters
- `inFrames` (boolean, optional): If `true`, returns the duration in frames. If `false` or omitted, returns the duration in milliseconds. Defaults to `false`.

### Usage
- `animationItem.getDuration();` // Gets duration in milliseconds.
- `animationItem.getDuration(true);` // Gets duration in frames.
```

--------------------------------

### Resize Animation Layout

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Adjust the animation's layout to fit its container using the `resize()` method. This is useful after container size changes.

```javascript
animationItem.resize();
```

--------------------------------

### Load Lottie Animation from JSON Data

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Load a Lottie animation directly from JSON data. This is useful when the animation data is available as a JavaScript object. Ensure that either `path` or `animationData` is provided, but not both.

```typescript
lottie.loadAnimation({
            container: this.mainCanvasRenderingContext,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            contentMode: 'Contain',
            frameRate: 30,
            animationData: this.jsonData,
            initialSegment: [10,50]
          })
```

--------------------------------

### Cache Management

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Manage cached animation files, including clearing all cache or specific files.

```APIDOC
## Clear File Cache

### Description
Clears cached animation files. This can be used to remove all downloaded cache files or specific ones.

### Method
`clearFileCache(filePath?: string, container?: CanvasRenderingContext2D)`

### Parameters
- `filePath` (string, optional): The path to the specific animation file or URL to clear from the cache. If omitted, all network-downloaded cache files are cleared.
- `container` (CanvasRenderingContext2D, optional): The CanvasRenderingContext2D associated with the animation, used for clearing cache related to local resource paths.

### Usage
- `lottie.clearFileCache();` // Clears all network-downloaded animation cache files.
- `lottie.clearFileCache('https://example.com/animation.json');` // Clears cache for a specific URL.
- `lottie.clearFileCache('common/lottie/data_url.json', canvasContext);` // Clears cache for a specific local file path with a given context.
```

--------------------------------

### Check if Animation is Network Loaded

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

This snippet shows how to check if a Lottie animation was loaded from a network source using the isNetLoad property.

```javascript
 this.isNet = '是否为网络加载' + this.animateItem.isNetLoad;

```

--------------------------------

### Bind Canvas Context for Optimized Lottie Drawing

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use bindContext2dToCoordinator to track the relationship between Lottie animations, CanvasRenderingContext2D, and Canvas. This ensures drawing only occurs when the associated canvas is visible, preventing redundant rendering. Remember to unbind when the component is destroyed.

```typescript
import lottie from '@ohos/lottie';

@Entry
@Component
struct InvisibleAreaAutoPlay {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
  private canvas2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings);

  aboutToAppear(): void {
    lottie.bindContext2dToCoordinator(this.canvas2D);
  }

  aboutToDisappear(): void {
    lottie.unbindContext2dFromCoordinator(this.canvas2D);
    lottie.destroy('robotYoga');
  }

  build() {
    Stack() {
      Canvas(this.canvas2D)
        .width(300)
        .height(300)
        .backgroundColor(Color.Gray)
        .onReady(() => {
          lottie.loadAnimation({
            container: this.canvas2D,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            contentMode: 'Contain',
            name: 'robotYoga',
            path: 'common/lottie/robotYoga.json'
          })
        })
    }.height('40%')
      .width('100%')
      .backgroundColor(Color.Gray)
  }
}
```

--------------------------------

### Go To Frame/Time and Stop

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `goToAndStop(value, isFrame)` to stop the animation at a specific frame or time. Set `isFrame` to `true` for frames, `false` (or omit) for milliseconds.

```javascript
animationItem.goToAndStop(250,true);
```

```javascript
animationItem.goToAndStop(5000,false);
```

--------------------------------

### Toggle Pause/Play Lottie Animation

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `togglePause()` to switch between playing and paused states for all animations or `animationItem.togglePause()` for a specific animation instance.

```javascript
lottie.togglePause(); //所有动画切换暂停/播放
```

```javascript
animationItem.togglePause(); //当前指定animationItem动画切换暂停/播放
```

--------------------------------

### Clear Lottie File Cache

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Manage cached animation files with `clearFileCache(path, container)`. You can clear all network-downloaded caches, a specific URL's cache, or local file cache associated with a container.

```javascript
lottie.clearFileCache(); //清除所有通过网络下载到沙箱的动画缓存文件
```

```javascript
lottie.clearFileCache('https://p3-dcd.byteimg.com/obj/motor-mis-img/5ec2c8af22bc17aedafe147a1d38f21d.json'); //清除指定网络地址对应的动画缓存文件
```

```javascript
lottie.clearFileCache('common/lottie/data_url.json',container); //清理指定本地动画文件引用的网络资源缓存
```

--------------------------------

### Set Animation Fill Mode

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Control how the animation scales within its bounds using `setContentMode(mode)`. Available modes include 'Cover', 'Contain' (default), 'Top', 'Bottom', and 'Fill'.

```javascript
animationItem.setContentMode('Cover');
```

--------------------------------

### Playback Control

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Control the playback of animations. You can play all animations or specific animation items.

```APIDOC
## Play Animation

### Description
Starts or resumes animation playback.

### Method
`play()`

### Usage
- `lottie.play();` // Plays all animations.
- `animationItem.play();` // Plays a specific animation item.

## Stop Animation

### Description
Stops the animation playback.

### Method
`stop()`

### Usage
- `lottie.stop();` // Stops all animations.
- `animationItem.stop();` // Stops a specific animation item.

## Pause Animation

### Description
Pauses the animation playback.

### Method
`pause()`

### Usage
- `lottie.pause();` // Pauses all animations.
- `animationItem.pause();` // Pauses a specific animation item.

## Toggle Pause/Play

### Description
Toggles between pausing and playing the animation.

### Method
`togglePause()`

### Usage
- `lottie.togglePause();` // Toggles pause/play for all animations.
- `animationItem.togglePause();` // Toggles pause/play for a specific animation item.
```

--------------------------------

### Add Animation Event Listener

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Attach event listeners to react to animation events like `enterFrame`, `loopComplete`, `complete`, etc. Ensure the same function reference is used for adding and removing listeners.

```javascript
AnimationEventName = 'drawnFrame' | 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error' | 'data_failed' | 'loaded_images';
animationItem.addEventListener("enterFrame",function(){
    // TODO something
})
```

--------------------------------

### Stop Lottie Animation

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `stop()` to halt all animations or `animationItem.stop()` to stop a specific animation instance. This action resets the animation to its beginning.

```javascript
lottie.stop(); //所有动画停止
```

```javascript
animationItem.stop(); //当前指定animationItem动画停止
```

--------------------------------

### Play Animation Segments

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Play specific segments of the animation using `playSegments(segments, forceFlag)`. The `forceFlag` determines if the segments take effect immediately (`true`) or on the next loop (`false`). Multiple segments can be provided as an array of arrays.

```javascript
animationItem.playSegments([5,15],[20,30],true);
```

--------------------------------

### Pause Lottie Animation

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Use `pause()` to temporarily halt all animations or `animationItem.pause()` to pause a specific animation instance. The animation can be resumed from its current state.

```javascript
lottie.pause(); //所有动画暂停
```

```javascript
animationItem.pause(); //当前指定animationItem动画暂停
```

--------------------------------

### Loading Multiple Animations with Same Variable

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

When multiple animations are loaded and assigned to the same variable, using animationItem.destroy() will only destroy the last loaded animation. It is recommended to use lottie.destroy(name) for proper destruction.

```javascript
    this.animationItem = lottie.loadAnimation({
          container: this.mainCanvasRenderingContext,  // 渲染上下文
          renderer: 'canvas',                          // 渲染方式
          loop: true,                                  // 是否循环播放,默认true
          autoplay: true,                              // 是否自动播放，默认true
          name: 'cat',                                // 动画名称
          contentMode: 'Contain',                      // 填充的模式
          path: this.path,                             // json路径
          initialSegment: [10,50]                      // 播放的动画片段
        })
        
    this.animationItem = lottie.loadAnimation({
          container: this.mainCanvasRenderingContext,  // 渲染上下文
          renderer: 'canvas',                          // 渲染方式
          loop: true,                                  // 是否循环播放,默认true
          autoplay: true,                              // 是否自动播放，默认true
          name: '2016',                                // 动画名称
          contentMode: 'Contain',                      // 填充的模式
          path: this.path,                             // json路径
          initialSegment: [10,50]                      // 播放的动画片段
        })        
```

--------------------------------

### Set Animation Frame Rate

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Specify the frame rate for the animation using `setFrameRate(rate)`. The rate can range from 1 to 120. Higher frame rates consume more power.

```javascript
animationItem.setFrameRate(30);
```

--------------------------------

### Destroy Lottie Animation

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Clean up resources by calling `destroy()`. This is crucial when the animation is no longer needed, especially when leaving a page or hiding a component. You can destroy all animations or a specific one by name.

```javascript
lottie.destroy(); //销毁所有动画
```

```javascript
lottie.destroy('name'); //销毁指定name动画
```

--------------------------------

### Change Animation Render Color

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Modify the color of animation elements using `changeColor(rgbArray, layerIndex, elementIndex)`. Provide an RGB/RGBA array, and optionally specify the layer and element index to target specific parts of the animation.

```javascript
animationItem.changeColor([255,150,203,0.8]);  //修改整个动画的颜色
```

```javascript
animationItem.changeColor([255,150,203,0.8],2); //修改该动画第二层的颜色
```

```javascript
animationItem.changeColor([255,150,203,0.8],2,2); //修改该动画第二层第二个元素的颜色
```

--------------------------------

### Remove Animation Event Listener

Source: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Flottie

Detach event listeners using `removeEventListener(eventName, callback)`. The `callback` function must be the same one used when adding the listener.

```javascript
animationItem.removeEventListener("enterFrame",function(){
    // TODO something
})
```
Tokens:
Raw