lottie

lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过AE插件Bodymovin导出Json文件，最终各个终端解析这个Json文件，还原动画。本文中我只介绍前端用到的库lottie-web。

lottie优点：

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

• ① 动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
• ② 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
• ③ 设计制作动画，前端展现动画，专业人做专业事，分工合理；
• ④ 卖家秀即买家秀，还原程度百分之百；
• ⑤ 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

lottie不足：

• ① lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。所以，需要注意lottie-web的加载。目前H5项目有离线包，PC项目也会上PWA，会对其进行缓存，保证加载速度。
• ② lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果；
• ③ 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范。
• ④ 有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等。

lottie-web

lottie-web一个适用于Web，Android，iOS，React Native和Windows 的移动库，它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在移动设备上进行本地渲染.

基本使用

npm install lottie-web

    const icon = document.getElementById('lottie')
    let animationData = require('./data.json')
    var params = {
      container: icon,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData
    }
    lottie.loadAnimation(params)

超图中使用

import mapLottie from '../mixins/mapLottie.js'
this.initLottieLayers()
this.addLottieOverlay(event.coordinate)

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import * as DomUtils from '../util/dom_util'
import Overlay from 'ol/Overlay'
export default {
  data () {
    return {
      lottieDraw: '',
      lottieResultLayer: {},
      lottieDrawLayer: {},
      lottieOverlayList: []
    }
  },
  methods: {
    initLottieLayers () {
      this.lottieResultLayer = new VectorLayer({
        source: new VectorSource()
      })
      this.map.addLayer(this.lottieResultLayer)
      // 绘点、线、面 缓冲范围 空间统计
      this.lottieDrawLayer = new VectorLayer({
        source: new VectorSource({ wrapX: false })
      })
      this.map.addLayer(this.lottieDrawLayer)
    },
    lottieClearInteraction () {
      if (this.lottieDraw) {
        this.map.removeInteraction(this.lottieDraw)
      }
    },
    removeOverlay () {
      for (let i = 0; i < this.lottieOverlayList.length; i++) {
        this.map.removeOverlay(this.lottieOverlayList[i])
      }
    },
    addLottieOverlay (coordinates) {
      let container = this.map.getOverlayContainer()
      let uuid = this.$biz.uuid()
      let lottieDiv = DomUtils.create('div', null, container, uuid)
      lottieDiv.style.transform = 'scale(0.6,0.6)'
      let pnt = new Overlay({
        id: 'LottieOverlay',
        position: coordinates,
        positioning: 'center-center',
        element: lottieDiv
      })
      window.lottie.loadAnimation({
        container: lottieDiv,
        renderer: 'svg',
        loop: true,
        animationData: require('./data.json')
      })
      this.map.addOverlay(pnt)
      this.lottieOverlayList.push(pnt)
    }
  }
}