说lottie谁是lottie?

逃离我推掉我的手 2023-10-14 16:43 52阅读 0赞

### 小册 ###

> 整理两本小册，一本是前端面试小册，一本是图解算法，阅读体验都很好,欢迎添加我微信`linwu-hi`获取

![image.png][]

### 背景 ###

在项目中， 常用的动画方案是 Gif 动画，Gif 动画存在一些问题，例如：文件较大、无法缩放匹配不同屏幕大小和密度、易出现锯齿、无法控制动画等。其他常用的动画方案有：

*  PNG序列帧：文件大，可能会在不同屏幕分辨率下失真
 *  SVG动画：实现成本高，易出现动画还原度低的情况

目前，项目需要经过调研，Lottie 动画是一种具有高可行性的方案。

![image.png][image.png 1]

### Lottie 简介 ###

[Lottie][] 是 airbnb 开源的动画库，支持多个平台如 Android、iOS、Web、React Native 和 Windows。其提供从 AE 到各终端的完整工具流程。设计师可以通过 AE 的 Bodymovin 插件将动画导出为 `json 文件`，然后通过`Lottie 实现动画效果`，`确保动画的还原度`。

`lottie实现的动画效果：`

[jcode][]

### lottie-web ###

[lottie-web][] 支持多种特性，提供复杂的动画控制和监听功能。

使用示例如下：

lottie.loadAnimation({
        
      container: animationWindow,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'https://linwu-hi.github.io/lottie/animation_ll2ddfyg.json'
    });

[jcode][jcode 1]

控制动画播放的方法：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animation.play</td> 
   <td>播放该动画，从目前停止的帧开始播放</td> 
  </tr> 
  <tr> 
   <td>stop</td> 
   <td>停止播放该动画，回到第 0 帧</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>暂停该动画，在当前帧停止并保持</td> 
  </tr> 
  <tr> 
   <td>goToAndStop</td> 
   <td>animation.goToAndStop(value, isFrame);跳到某个时刻/帧并停止。isFrame(默认 false)指示 value 表示帧还是时间(毫秒)</td> 
  </tr> 
  <tr> 
   <td>goToAndPlay</td> 
   <td>animation.goToAndPlay(value, isFrame);跳到某个时刻/帧并进行播放</td> 
  </tr> 
  <tr> 
   <td>goToAndStop</td> 
   <td>animation.goToAndStop(30, true);跳转到第 30 帧并停止</td> 
  </tr> 
  <tr> 
   <td>playSegments</td> 
   <td>animation.playSegments(arr, forceFlag);arr 可以包含两个数字或者两个数字组成的数组，forceFlag 表示是否立即强制播放该片段 animation.playSegments([10,20], false);播放完之前的片段，播放 10-20 帧 animation.playSegments([[0,5],[10,18]], true);直接播放 0-5 帧和 10-18 帧</td> 
  </tr> 
  <tr> 
   <td>setSpeed</td> 
   <td>animation.setSpeed(speed);设置播放速度，speed 为 1 表示正常速度</td> 
  </tr> 
  <tr> 
   <td>setDirection</td> 
   <td>animation.setDirection(direction);设置播放方向，1 表示正向播放，-1 表示反向播放</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>animation.destroy();删除该动画，移除相应的元素标签等。在 unmount 的时候，需要调用该方法</td> 
  </tr> 
 </tbody> 
</table>

监听事件：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data_ready</td> 
   <td>加载完 json 动画</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>播放完成（循环播放下不会触发）</td> 
  </tr> 
  <tr> 
   <td>loopComplete</td> 
   <td>当前循环下播放（循环播放/非循环播放）结束时触发</td> 
  </tr> 
  <tr> 
   <td>enterFrame</td> 
   <td>每进入一帧就会触发，播放时每一帧都会触发一次，stop 方法也会触发</td> 
  </tr> 
  <tr> 
   <td>segmentStart</td> 
   <td>每进入一帧就会触发，播放时每一帧都会触发一次，stop 方法也会触发</td> 
  </tr> 
  <tr> 
   <td>DOMLoaded</td> 
   <td>动画相关的 dom 已经被添加到 html 后触发</td> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>将在动画删除时触发</td> 
  </tr> 
 </tbody> 
</table>

### Lottie 动画性能 ###

![image.png][image.png 2]

> 对比 Lottie 和 Gif 动画，数据显示 Lottie 动画文件更小，帧率更高，而且其性能表现更好。

*  GIF动图

![animation\_ll2ewnwn\_small.gif][animation_ll2ewnwn_small.gif]

*  Lottie动画

[jcode][jcode 2]

### react-lottie ###

> [react-lottie][] 将 lottie-web 封装成 React 组件，使其更加易于在 React 中使用。

import React from 'react'
    import Lottie from 'react-lottie';
    import * as animationData from './pinjump.json'
     
    export default class LottieControl extends React.Component {
     
      constructor(props) {
        super(props);
        this.state = {isStopped: false, isPaused: false};
      }
     
      render() {
        const buttonStyle = {
          display: 'block',
          margin: '10px auto'
        };
     
        const defaultOptions = {
          loop: true,
          autoplay: true, 
          animationData: animationData,
          rendererSettings: {
            preserveAspectRatio: 'xMidYMid slice'
          }
        };
     
        return <div>
          <Lottie options={defaultOptions}
                  height={400}
                  width={400}
                  isStopped={this.state.isStopped}
                  isPaused={this.state.isPaused}/>
          <button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
          <button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
          <button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
        </div>
      }
    }

### vue-lottie ###

> [vue-lottie][] 将 lottie-web 封装成 vue 组件，使其更加易于在 vue 中使用。

也有`vue3-lottie`

<template>
        <div id="app">
            <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
            <div>
                <p>Speed: x{
       {animationSpeed}}</p>
                <input type="range" value="1" min="0" max="3" step="0.5"
                       v-on:change="onSpeedChange" v-model="animationSpeed">
            </div>
            <button v-on:click="stop">stop</button>
            <button v-on:click="pause">pause</button>
            <button v-on:click="play">play</button>
        </div>
    </template>
     
    <script>
      import Lottie from './lottie.vue';
      import * as animationData from './assets/pinjump.json';
     
      export default {
        name: 'app',
        components: {
          'lottie': Lottie
        },
        data() {
          return {
            defaultOptions: {animationData: animationData},
            animationSpeed: 1
          }
        },
        methods: {
          handleAnimation: function (anim) {
            this.anim = anim;
          },
     
          stop: function () {
            this.anim.stop();
          },
     
          play: function () {
            this.anim.play();
          },
     
          pause: function () {
            this.anim.pause();
          },
     
          onSpeedChange: function () {
            this.anim.setSpeed(this.animationSpeed);
          }
        }
      }
    </script>

[image.png]: https://img-blog.csdnimg.cn/img_convert/560def2e4d56a32d739b49478edd6d94.png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/33999ecf20db40398585a4c3fdd41488.png
[Lottie]: http://airbnb.io/lottie/#/
[jcode]: https://code.juejin.cn/pen/7264949695460409379
[lottie-web]: https://github.com/airbnb/lottie-web
[jcode 1]: https://code.juejin.cn/pen/7264872969531293732
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/2c368cfe79141eb07311bbaf15013ce4.png
[animation_ll2ewnwn_small.gif]: https://img-blog.csdnimg.cn/img_convert/15cbfbf09e84a9c96f033ca7f14f7cda.gif
[jcode 2]: https://code.juejin.cn/pen/7264963072069435429
[react-lottie]: https://github.com/chenqingspring/react-lottie
[vue-lottie]: https://www.npmjs.com/package/vue-lottie