lottie真正厉害的地方，是能在动画运行过程中修改动画的内容，gif就不行

前言

这段时间在开发某个应用，这个项目里包含了挺多gif动画图的，其中有一些比较复杂的动画图，UED妹子反映出两个问题：

部分复杂的动画图，实际播放效果不是很好
复杂动画导出透明背景会有问题

为了和同事友好相处（不扯皮），便去研究了下这个库。

Lottie

一、介绍

翻译一下，Lottie是一个IOS、Android和React Native库，可以实时渲染After Effects动画，让应用程序可以像使用静态图像一样轻松地使用动画。

大家这时候可能好奇了，这不是原生应用库吗，跟web应用有毛子关系。当然，这么好用的库，YYDS的github怎么会没有对应的web版本（github地址）。

二、用法

# with npm
npm install lottie-web
# with yarn
yarn add lottie-web

封装lottie组件，调用lottie.loadAnimation 初始化

<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
  import lottie from 'lottie-web';

  export default {
    props: {
      options: {
        type: Object,
        required: true
      },
      height: Number,
      width: Number,
    },

    data () {
      return {
        style: {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          overflow: 'hidden',
          margin: '0 auto'
        }
      }
    },

    mounted () {
      this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
          rendererSettings: this.options.rendererSettings
        }
      );
      this.$emit('animCreated', this.anim)
    }
  }
</script>

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

<style>
    ...
</style>

资源文件为JSON文件，该文件由UED通过AE软件导出，我们能通过这个库去调用这些API去实现一些效果。

比如：

play 动画开启
pause 动画暂停
stop 动画停止
setSpeed 动画的播放速度

还有一些比较酷炫的效果可以看看lottie库，前提需要JSON文件能支持的。

三、优点

1. 文件小

可能有同学会问了，我直接放一张Gif图也能实现呀，而且用法跟图片一样简单。的确是，直接使用image是简单快捷，但一些复杂的gif图片的大小是很大的，这样会导致最好工程打出来的包比较大。

上图是我要实现的一个动画图，大家可以对比下两个文件大小

git格式比JSON格式大了有一倍多，若动画更复杂，文件则越大

2.动画可控，且播放效果好

通过lottie库能够控制其播放以及播放速度，而且播放的效果也不会像gif图存在掉帧的情况

点击开始识别，底图开始动画效果感应
结束识别时，地图停止播放动画

尾语

由于我这次做的项目是xx小程序，它的壳是属于APP原生的，并没有DOM和BOM等属性无法进行dom操作（lottie-web库需要进行dom操作），因此写法跟上面的会有所区别，大家有兴趣的话，可以移步至uniapp使用lottied动画库。

Lottie动画库的应用

前言