https://github.com/pissang/lottie-parser

Parsing lottie files and display it in the Apache ECharts.
https://github.com/pissang/lottie-parser

Last synced: about 1 month ago
JSON representation

Parsing lottie files and display it in the Apache ECharts.

• Host: GitHub
• URL: https://github.com/pissang/lottie-parser
• Owner: pissang
• License: mit
• Created: 2021-12-04T14:48:38.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-22T06:53:18.000Z (almost 3 years ago)
• Last Synced: 2024-04-14T07:52:37.089Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 667 KB
• Stars: 22
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lottie Parser

Parsing lottie files and display it in the Apache ECharts.

## Demo

[![Edit eager-ives-yiqn7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/eager-ives-yiqn7?fontsize=14&hidenavigation=1&theme=dark)

## Install

```bash

npm i lottie-parser

```

## Basic Usage

```ts

import * as lottieParser from 'lottie-parser';

import * as echarts from 'echarts';

// Install required shapes to echarts

lottieParser.install(echarts);

const chart = echarts.init(dom);

fetch(`lottie.json`)

  .then((response) => response.json())

  .then((data) => {

    const { elements, width, height } = lottieParser.parse(data, {

      // 循环播放动画

      loop: true,

    });

    // Scale to 400px

    const scale = 400 / Math.min(width, height);

    chart.setOption({

      graphic: {

        elements: [

          {

            type: 'group',

            scaleX: scale,

            scaleY: scale,

            // Elements is compatitable with echarts graphic.

            children: elements,

          },

        ],

      },

    });

  });

```

## Limitations

- Expressions are not supported

- Text and image layers are not supported

- Repeat on the rect and ellipsis doesn't support trim yet.

- Gradient animation is not supported.

Some other unknown issues can be reported in the issue list.