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.2.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. })
      ,