search

pd4d10 / lottiefy

Render Lottie to any engine
https://lottiefy.js.org
MIT License
62 stars 2 forks source link
lottie

readme

lottiefy npm

A toolkit to customize Lottie renderer. Demo here: https://lottiefy.js.org

Motivation

Lottie is a solution to transform Adobe After Effects animations directly to code. It already has web, Android and iOS renderers. But Sometimes we need more control. For example, developers may want to render Lottie to other engines, like Cocos2d-x and PixiJS. With lottiefy, you can customize your own renderer in these cases.

Notice: It is 0.x currently, and may have breaking changes in future. Please submit an issue if something went wrong.

Use cases

Renderer Description
@lottiefy/cocos2dx Render Lottie to Cocos2d-x(JS binding)
@lottiefy/cocos2dx-lua Generate Lua code to render Lottie to Cocos2d-x(Lua binding)
@lottiefy/pixi Render Lottie to PixiJS [WIP]
@lottiefy/spritejs Render Lottie to SpriteJS [WIP]
... ...

Installation

Install via NPM:

npm install --save lottiefy

Or just use UMD bundle via script tag:

<script src="https://unpkg.com/lottiefy/dist/lottiefy.min.js"></script>

Usage

import { LottieRenderer } from 'lottiefy'

const renderer = new LottieRenderer({
  animationData: {}, // JSON data exported by Bodymovin
  containerId: '', // The id of container to render
  actions: {
    createPrecomp(id, payload) {
      // Specify how to create a precomp
      // ...
    },
    createImage(id, payload) {
      // Specify how to create an image
      // ...
    },
    // ...

    // List of all actions:
    // https://github.com/pd4d10/lottiefy/blob/master/src/types.ts#L53
    // Notice that all actions should be specified to make it works correctly
  },

  // Some engines like Cocos2d-x have opposite Y coordinate with Adobe After effects
  // Set reverseY to true in these cases, default is false
  reverseY: false,

  // Set animation speed
  speed: 1,
})

// Call generateAnimations to run all actions
renderer.generateAnimations()

Roadmap

License

MIT