@galacean/engine-lottie v1.0.1
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
5 months ago
6 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago