Lottie 动画

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

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

安装

使用 NPM

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

在浏览器中

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

使用

  1. import { Game, GameObject, resource } from '@eva/eva.js'
  2. import { RendererSystem } from '@eva/plugin-renderer'
  3. import { LottieSystem, Lottie } from '@eva/plugin-renderer-lottie'
  6. resource.addResource([
  7.   {
  8.     name: 'Halo',
  9.     // @ts-ignore
  10.     type: 'LOTTIE',
  11.     src: {
  12.       json: {
  13.         type: 'json',
  14.         url: 'https://gw.alipayobjects.com/os/bmw-prod/61d9cc77-12de-47a7-b6e5-06c836ce7083.json',
  15.       },
  16.     },
  17.   },
  18.   {
  19.     name: 'Red',
  20.     // @ts-ignore
  21.     type: 'LOTTIE',
  22.     src: {
  23.       json: {
  24.         type: 'json',
  25.         url: 'https://gw.alipayobjects.com/os/bmw-prod/e327ad5b-80d6-4d3f-8ffc-a7dd15350648.json',
  26.       },
  27.     },
  28.   },
  29. ]);
  31. const game = new Game({
  32.   systems: [
  33.     new RendererSystem({
  34.       canvas: document.querySelector('#canvas'),
  35.       width: 750,
  36.       height: 1624,
  37.       transparent: true,
  38.     }),
  39.     new LottieSystem(),
  40.   ],
  41.   autoStart: true,
  42.   frameRate: 60,
  43. });
  45. game.scene.transform.size = {
  46.   width: 750,
  47.   height: 1624,
  48. };
  50. const halo = new Lottie({resource: 'Halo'});
  51. const red = new Lottie({resource: 'Red'});
  53. halo.on('complete', () => {
  54.   console.log('halo play complete !');
  55. });
  56. red.on('complete', () => {
  57.   console.log('Red play complete !');
  58. });
  60. halo.play([], {repeats: 0});
  63. red.play([], {
  64.   repeats: 0,
  65.   slot: [
  66.     {
  67.       name: '#number',
  68.       type: 'TEXT',
  69.       value: '10',
  70.       style: {
  71.         fontSize: 64,
  72.       },
  73.     },
  74.     {
  75.       name: '#unit',
  76.       type: 'TEXT',
  77.       value: '元',
  78.       style: {
  79.         fontSize: 22,
  80.       },
  81.     },
  82.     {
  83.       name: '#title',
  84.       type: 'TEXT',
  85.       value: '我是主标题',
  86.       style: {
  87.         fontSize: 32,
  88.       },
  89.     },
  90.     {
  91.       name: '#subtitle',
  92.       type: 'TEXT',
  93.       value: '我是副标题',
  94.       style: {
  95.         fontSize: 24,
  96.       },
  97.     },
  98.   ],
  99. });
  101. red.onTap('#btn', () => {
  102.   console.log('btn click !');
  103. });
  105. const haloGameObj = new GameObject('Halo', {
  106.   anchor: {
  107.     x: 0,
  108.     y: 0,
  109.   },
  110. });
  111. const redGameObj = new GameObject('Red', {
  112.   anchor: {x: 0.5, y: 0.3},
  113.   size: {width: 660, height: 757},
  114.   origin: {x: 0.5, y: 0.5},
  115. });
  117. haloGameObj.addComponent(halo);
  118. redGameObj.addComponent(red);
  120. game.scene.addChild(haloGameObj);
  121. game.scene.addChild(redGameObj);

参数

  • resource 资源名称

方法

LottieComponent.play

播放动画

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

参数

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

slot:

  • name: 插槽的名字。
  • type: 插槽的类型，区分文字及图片。
  • value: 插槽要填入的值，图片则为 CDN 链接。
  • style：插槽的样式设置。
  1. interface options {
  2.   repeats?: number
  3.   slot?: Array<{
  4.     name: string;
  5.     type: 'TEXT' | 'IMAGE';
  6.     value: string;
  7.     style: IStyle;
  8.   }>
  9. }

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 事件

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

参数

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

事件

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