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'
  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);

Options

  • resource resource name

Methods

LottieComponent.play

Play animation

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

Options

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

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

ParameterDescriptionTypeDefault Value
xposition.xnumber
yposition.ynumber
widthbounds.widthnumber
heightbounds.heightnumber
anchordocument{x: number, y: number}{x: 0, y: 0}
pivotdocument{x: number, y: number}{x: 0, y: 0}
TextStyleDocumentPIXI.TextStyle

LottieComponent.onTap

Bind the Tap event to the slot element in Lottie

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

Options

DescriptionTypeDefault Value
Slot namestring
Event callback after click() => void

Events

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