Skip to main content

Lottie 动画

Lottie 可以播放通过 Bodymovin 导出的 Adobe After Effects 动画。

Eva.js 的 Lottie 插件支持 Lolita 导出的动画。

安装

使用 NPM

npm i @eva/plugin-renderer @eva/plugin-renderer-lottie -S

在浏览器中

<script src="https://unpkg.com/@eva/plugin-renderer-lottie@1.2.x/dist/EVA.plugin.renderer.lottie.min.js"></script>

使用

import { Game, GameObject, resource } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'
import { LottieSystem, Lottie } from '@eva/plugin-renderer-lottie'


resource.addResource([
{
name: 'Halo',
// @ts-ignore
type: 'LOTTIE',
src: {
json: {
type: 'json',
url: 'https://gw.alipayobjects.com/os/bmw-prod/61d9cc77-12de-47a7-b6e5-06c836ce7083.json',
},
},
},
{
name: 'Red',
// @ts-ignore
type: 'LOTTIE',
src: {
json: {
type: 'json',
url: 'https://gw.alipayobjects.com/os/bmw-prod/e327ad5b-80d6-4d3f-8ffc-a7dd15350648.json',
},
},
},
]);

const game = new Game({
systems: [
new RendererSystem({
canvas: document.querySelector('#canvas'),
width: 750,
height: 1624,
transparent: true,
}),
new LottieSystem(),
],
autoStart: true,
frameRate: 60,
});

game.scene.transform.size = {
width: 750,
height: 1624,
};

const halo = new Lottie({resource: 'Halo'});
const red = new Lottie({resource: 'Red'});

halo.on('complete', () => {
console.log('halo play complete !');
});
red.on('complete', () => {
console.log('Red play complete !');
});

halo.play([], {repeats: 0});


red.play([], {
repeats: 0,
slot: [
{
name: '#number',
type: 'TEXT',
value: '10',
style: {
fontSize: 64,
},
},
{
name: '#unit',
type: 'TEXT',
value: '元',
style: {
fontSize: 22,
},
},
{
name: '#title',
type: 'TEXT',
value: '我是主标题',
style: {
fontSize: 32,
},
},
{
name: '#subtitle',
type: 'TEXT',
value: '我是副标题',
style: {
fontSize: 24,
},
},
],
});

red.onTap('#btn', () => {
console.log('btn click !');
});

const haloGameObj = new GameObject('Halo', {
anchor: {
x: 0,
y: 0,
},
});
const redGameObj = new GameObject('Red', {
anchor: {x: 0.5, y: 0.3},
size: {width: 660, height: 757},
origin: {x: 0.5, y: 0.5},
});

haloGameObj.addComponent(halo);
redGameObj.addComponent(red);

game.scene.addChild(haloGameObj);
game.scene.addChild(redGameObj);

参数

  • resource 资源名称

方法

LottieComponent.play

播放动画

LottieComponent.play([], { repeats: Infinity })
LottieComponent.play([0, 10])

参数

说明类型默认值
播放动画帧率区间,默认从第一帧播放至最后一帧。Array<number, number>[start, end]
repeate: 播放次数,Infinity 循环播放。numberInfinity

slot:

  • name: 插槽的名字。
  • type: 插槽的类型,区分文字及图片。
  • value: 插槽要填入的值,图片则为 CDN 链接。
  • style:插槽的样式设置。
interface options {
  repeats?: number
  slot?: Array<{
    name: string;
    type: 'TEXT' | 'IMAGE';
    value: string;
    style: IStyle;
  }>
}

IStyle

参数说明类型默认值
xposition.xnumber
yposition.ynumber
widthbounds.widthnumber
heightbounds.heightnumber
anchor文档{x: number, y: number }{x: 0, y: 0}
pivot文档{x: number, y: number }{x: 0, y: 0}
TextStyle文档PIXI.TextStyle

LottieComponent.onTap

为 Lottie 中的插槽元素绑定 Tap 事件

LottieComponent.onTap('#btn', () => {
console.log('btn click !')
})

参数

说明类型默认值
插槽名称string
点击后的事件回调() => void

事件

LottieComponent.on('complete', () => {
console.log('LottieComponent play complete !')
})