lottie 動畫

前沿

官方文檔： 

http://airbnb.io/lottie/#/web

 

lottie-web一個適用於Web，Android，iOS，React Native和Windows 的移動庫，

它可以使用Bodymovin解析以json 格式導出的Adobe After Effects動畫，並在移動設備上進行本地渲染.

 

使用：

通過一個叫 Bodymovin 的開源 After Effects 插件，以 JSON 文件的形式進行輸出，Lottie 通過 JSON 格式下載動畫數據並實時提供給開發者。

① bodymovin插件下載安裝

② 安裝並解壓bodymovin

③ 打開AE，添加bodymovin擴展

④ 導出data.json文件，動畫的數據文件 詳細可參考：炫酷神器，AE插件Bodymovin.zxp的安裝與使用

⑤ API

導入初始化：

<script src="js/bodymovin.js" type="text/javascript"></script>
復制代碼
let animation = bodymovin.loadAnimation({
  animationData, // [必須] data.json文件
  path, // data.json文件路徑(animationData/path選其一傳入即可)
  container，// [必須] 父容器
  renderer, // [必須] 渲染方式
  loop,
  autoplay
}

暫停/停止/播放：

bodymovin.play()
bodymovin.pause()
bodymovin.stop() // 回到第0幀

跳轉之某幀並播放：

animation.gotoAndStop(time)或animation.gotoAndStop(frame)
animation.gotoAndPlay(time)或animation.gotoAndPlay(frame)

設置fp：

animation.setSubframe()
// true: 使用本地環境的fps [默認]
// false: 使用ae原本的fps

事件監聽：

animation.onComplete = function () {} // 動畫結束
animation.onLoopComplete = function () {} // 當前循環結束
// 使用addEventListener方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})

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無法實現，有些是因為性能問題，有些是沒有做。比如：描邊動畫等。

 

 

一個小的練習

JS

/* Shapes */
var svgContainer = document.getElementById('svgContainer');
var animItem = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'svg',
    loop: true,
    path: '/uploads/1906/girl.json'
});
animItem.setSubframe(false);
/* Shapes */
var svgContainer = document.getElementById('svgContainer2');
var animItem2 = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'canvas',
    loop: true,
    path: '/uploads/1906/parents.json'
});
animItem2.setSubframe(false);
/* Shapes */
var svgContainer = document.getElementById('svgContainer3');
var animItem3 = bodymovin.loadAnimation({
    wrapper: svgContainer,
    animType: 'canvas',
    loop: true,
    path: '/uploads/1906/sasquatch.json'
});
animItem3.setSubframe(false);
animItem.setSpeed(0.8)
animItem2.setSpeed(0.8)
animItem3.setSpeed(0.8)
window.onresize = function() {
    animItem.resize()
    animItem2.resize()
    animItem3.resize()
}

 

html

<div id="svgContainer"></div>
<div id="svgContainer2"></div>
<div id="svgContainer3"></div>

<script src="/uploads/1903/lottie.min.js"></script>

css

html,
body {
    margin: 0;
    padding: 0;
    background-color: #1E1C26;
}
body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}
#svgContainer,
#svgContainer2,
#svgContainer3 {
    width: 32.8%;
    height: 100%;
    background-color: #1E1C26;
    display: inline-block;
    vertical-align: top;
}

 

然后就是要和UI那邊商討吧這樣的設計和動畫，是不是進階了呢 加油呀