lottie-pixi

一个高性能的解析和播放 lottie 动画的工具包，动画渲染基于 [email protected] 引擎。

What it is

lottie-pixi 是一个为 pixi.js 引擎准备的动画工具集，可以无缝的帮助你在 pixi.js 技术体系上扩展 lottie 动画 和 basic 动画.

Why use it

lottie-pixi 被设计用来解决重型、复杂的多动画场景，如果你遇到了以下问题，那么 lottie-pixi 将是你最好的解决方案。

• 你需要在一个canvas中播放多个lottie 动画
• 你的lottie 动画需要动态替换一些内容
• 你需要给lottie 动画中的某个图片加点击事件
• 你在开发一个小游戏，需要用到动画lottie 动画
• 你的lottie 动画遇到性能问题

哪些情况下不建议使用 lottie-pixi ：

• 动画非常简单，lottie-web 就已经够用了的时候
• 会创建非常多canvas的时候，例如：列表中的每个按钮都是一个lottie 动画，创建过多的webgl会有性能问题
• 页面中最多不要同时存在多个webgl上下文，这在移动端会有系统限制

Features

• lottie 动画：支持 lottie 动画特性，功能、图层效果对标 lottie-canvas
• 绝对性能优势：借助 pixi 强大的 Sprite 和 shape 合并渲染，在大量渲染对象场景下性能优势明显
• overlap 模式：在 lottie 之上创造性的新增 overlap mode，在实际场景中非常有用
• 动画插槽功能：支持动画插槽功能，你可以轻松的在动画中添加 你自己的渲染节点 或 新lottie动画节点
• 高自由度：你可以完全掌控动画中的每一个渲染对象
• basic 动画：支持 transform-alpha 属性插值动画，包括 tween 动画 和 bodymovin 动画

Install

npm install -S lottie-pixi

Usage

Lottie 动画

你只需调用一个函数就能播放动画，非常方便。

import 'lottie-pixi/build/pixi'; // pixi v5.x 的组装代码
import { loadAnimation } from 'lottie-pixi';

const animation = loadAnimation({
  view: '#load-animation',
  path: 'http://image.uc.cn/s/uae/g/01/lottieperformance/webglcanvas/game-preview/data.json',
});

或者创建一个 AnimationManager 单例来解析和管理任意多个 lottie 动画文件。并将它们添加到渲染引擎的任意渲染节点上。

import 'lottie-pixi/build/pixi'; // pixi v5.x 的组装代码
import { Application } from '@pixi/app'; // pixi v5 import
import { AnimationManager } from 'lottie-pixi';

const app = new Application({
  view: document.getElementById('demo-canvas'),
  width: window.innerWidth,
  height: window.innerHeight,
});

// just need single instance with one app
const animationManager = new AnimationManager(app);

// parse one or more anims
const anim1 = animationManager.parseAnimation({
  keyframes: data1,
});
const anim2 = animationManager.parseAnimation({
  keyframes: data2,
});

app.stage.addChild(anim1.group, anim2.group);

Basic 动画

lottie 动画 适合处理多物体的复杂运动，而 basic 动画 主要适用于单个物体运动的场景，假如你只想要某个物体做个小动画，basic 动画 就是最好的选择。

你可以直接在任意显示对象上调用 animate 或 bodymovin 方法触发一个动画。

import 'lottie-pixi/build/pixi'; // pixi v5.x 的组装代码
import { Application } from '@pixi/app'; // pixi v5 import
import { Graphics } from '@pixi/graphics'; // pixi v5 import
import { EnableAnimations, Tween } from 'lottie-pixi';

const app = new Application({
  view: document.getElementById('demo-canvas'),
  width: window.innerWidth,
  height: window.innerHeight,
});

const ball = new Graphics();
ball.beginFill(0xFFFFFF, 1);
ball.drawCircle(250, 250, 50);
ball.endFill();

// 播放 from-to 动画
const anim = ball.animate({
  from: {x: 100},
  to: {x: 200},
  ease: Tween.Bounce.Out,
  // ... 更多配置
});

// 或者 播放 bodymovin 动画
const anim = ball.bodymovin({
  keyframes: data.layers[3], // 指定使用 lottie 动画数据的某一个图层的关键帧
  frameRate: data.fr,
  ignoreProps: [ 'position', 'scaleX' ], // 忽略某些属性
  // ... 更多配置
});

app.stage.addChild(ball);