Lottie，讓動畫簡單點~

前言

分享一個動畫插件-Lottie-web，airbnb/Lottie系列的一個web分支，固然支持多端，有興趣的能夠看下其餘家族成員； Lottie家族成員

關於GIF，在實際開發中，有些複雜的動畫技術每每沒有時間和精力去處理，基本都是設計老闆丟點GIF玩玩，這一玩有可能價值大幾百kb甚至是上M，能夠說是一點都很差玩，因此就有了Lottie，能夠說Lottie的出現從本質上解決了gif資源在各端的適用性以及利用率的痛點；

使用流程

特色

適用性： 一段json多端使用（ios、Android、windows、web）
 利用率： git轉json，資源節約
複製代碼

效果演示

VUE使用示例

import lottie from 'lottie-web'
 startLottie () {
  // start
  dome = lottie.loadAnimation({
    container: this.$refs.lottie, // the dom element that will contain the animation
    renderer: 'svg', // 'svg' / 'canvas' / 'html' to set the renderer
    loop: true, //
    autoplay: true, // autoplay
    path: './data.json' // the path to the animation json
  })
},
 endLottie () {
  // end
  dome.destroy()
 }
複製代碼

更多使用技巧

Performance

既然爲了解決性能而存在，那麼性能確定是最關注的的了，來看一下，上述演示示例的跑分，整體觀察下來，CPU,4x slowdown,速度、內存、fps都是穩的雅痞，並且也作了長時間的測試，也是沒有問題的，能夠放心入手~

結語

Lottie自己的依賴包min就有100多kb的大小，因此你們在節約GIF資源的前提下，也不要忘記對依賴包自己的優化哈； 採用cdn或是gzip都是比較好的方式，另外有興趣的朋友能夠深刻去研究一下~