lottie 動畫
前沿
官方文件:
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那邊商討吧這樣的設計和動畫,是不是進階了呢 加油呀