Lottie Animation

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

This plugin suport animation exported with Lolita.

Install

With NPM

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

In Browser

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

Usage

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

Options

  • resource resource name

Methods

LottieComponent.play

Play animation

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

Options

| | Play animation frame rate interval, the default is from the first frame to the last frame. | Array | [start, end] | | repeate: play times, Infinity loop play. | number | Infinity |

slot: -name: The name of the slot. -type: The type of the slot, distinguish between text and pictures. -value: The value to be filled in the slot, and the picture is a CDN link. -style: The style setting of the slot.

  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

| | x | position.x | number | | | y | position.y | number | | | width | bounds.width | number | | | height | bounds.height | number | | | anchor | document | {x: number, y: number} | {x: 0, y: 0} | | pivot | document | {x: number, y: number} | {x: 0, y: 0} | | TextStyle | Document | PIXI.TextStyle | |

LottieComponent.onTap

Bind the Tap event to the slot element in Lottie

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

Options

| | Slot name | string | | | Event callback after click | () => void | |

Events

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