galacean / engine-lottie

A WebGL runtime of lottie based on Galacean Engine

Galacean Lottie

This is a lottie runtime created by Galacean Engine. Currently, It can only render sprite elements in the lottie tree. It is high-performance owing to drawing all sprites in batch, which is different from svg or canvas renderer of lottie-web. See more info: documentation.

Features

• Sprite element: transform and opacity animation.
• Text element
• 3D rotation: rotate element in 3D space.
• Animation clip: play animation clip.

TODO

• Sprite mask
• Shape element
• Expression

Usage

Before using the code below, you should transform original lottie JSON file ( images must be base64-encoding strings) to Galacean standard lottie files. It's convenient to complete the task with tool-atlas-lottie which will generate a folder which contains three files: a processed lottie JSON file, an atlas file and an image.

import { LottieAnimation } from "@galacean/engine-lottie";

// Load lottie json、atlas file with engine's `resourceManager`
engine.resourceManager.load({
  urls: [
    "https://gw.alipayobjects.com/os/bmw-prod/b46be138-e48b-4957-8071-7229661aba53.json",
    "https://gw.alipayobjects.com/os/bmw-prod/6447fc36-db32-4834-9579-24fe33534f55.atlas"
  ],
  type: 'lottie'
}).then((lottieEntity) => {
  // Add lottie entity created to scene 
  root.addChild(lottieEntity);

  // Get `LottieAnimation` component and play the animation
  const lottie = lottieEntity.getComponent(LottieAnimation);
  lottie.isLooping = true;
  lottie.speed = 1;
  lottie.play();
});

Install

npm i @galacean/engine-lottie --save

Contributing

This project is work-in-progress. Everyone is welcome to create issues or submit pull requests. Make sure to read the Contributing Guide before submitting changes.

Dev

1.Clone this repository and install the dependencies:

npm i

2.Run the example:

npm run example

License

MIT