前端動畫解決方案 - Lottie
工程師也能輕鬆實現 AE 動效
為了引導用戶了解產品內容，動畫是不可或缺的工具，讓產品更有活力也能吸引用戶目光。除了動畫外還有很多方式可以加強用戶第一印象，如果想瞭解更多可以參考 👉 網頁設計-網站的第一印象。
下面我們會先探討前端實現動畫常用的幾種方式
# 分析優缺點
# 為什麼用 Lottie
最後我們會帶讀者用 Vue 來實做簡單的例子，更能體會 Lottie 帶來的方便性。
製作動畫的方式
- CSS Sprite
原理是將需要用到的圖片合併成一張大圖也就是俗稱的雪碧圖，再利用background-position 來定位各個圖片位置。
以下圖為例子，從左至右偏移就會變的像在走路一樣。
優點：因為只有一張圖，所以可以減少網路請求數並加快網頁載入的速度
缺點：這種類影格動畫的作法局限性比較大，圖檔雖然只有一張但可能相對檔案變大了，另外就是在不同解析度下可能會失真。
2. Gif
使用 Gif 是最簡單的，只要一張圖就可以搞定，也不用特別寫 CSS，但同樣會有失真的問題。
3. SVG
SVG 解決了失真的問題，但對於初學者要使用 SVG 製作動畫還是有一定的難度，不要太複雜的話應該還是可以慢慢刻出來。
大部分的動畫都可以用上面三種方式達成，但假如有需求要實作下面的效果且又不會失真，我想工程師心都涼了一半了吧！
工程師:「恩…那個…請問是認真的嗎 😓？」
設計師 :「是的，很認真 🙆♀️」
使用 Lottie
Lottie 是由 Airbnb 開源的套件，可以將 AE 動畫套用在 Web 及 App 上。
設計師用 AE 把動畫效果做出來，再用 Bodymovin 導出 JSON 檔案給工程師，而工程師只要拿 JSON 檔使用 Lottie 就可做出動畫了。
設計師和工程師終於不用糾結理想與技術面的問題了。
用 Vue 實作
這邊開始帶大家用 Vue 來實作
首先需要先安裝 Lottie，並準備好設計師給的 JSON 檔
yarn add lottie-web# 建立一個 Component
# 初始化 loadAnimation
- animationData : Import 的 JSON 檔
- path : JSON 檔案的相對路徑
- loop : 是否啟用循環播放 boolean / 循環次數 number
- autoplay : 是否自動播放
- renderer : 可以用SVG、Canvas、HTML
- container : 要顯示動畫的dom元素
🔥 注意
path 代表 JSON 檔案路徑，但我們範例是 import JSON 所以要用 animationData 才可以正常使用喔！# 監聽動畫
Lottie 提供幾個事件讓我們可以在 Lottie 初始化或是結束時額外做一些處理
- complete : 動畫播放完畢
- loopComplete : 循環播放結束
- enterFrame : 開始播放時
- config_ready : 初始化配置完成
# 控制動畫播放速度及進度
Lottie 有基本的 play()、stop()、pause() 方法外，還提供了像是
setSpeed：調整動畫速度
goToAndStop：指定播放動畫區間
totalFrames：進度百分比
等方法…這些都可以讓我們方便地在動畫上做額外的控制與操作。
👇 下方附上程式碼與完成的畫面，大家也可以實際點點看按鈕看看如何控制動畫。
結語
相信看到這邊讀者多少有感受到 Lottie 的優點與便利性，不僅可以將設計師的動畫完整呈現，也大大提升工程師的生產力，但使用 Lottie 還是有幾點要注意一下
- AE 動畫須盡可能照規範設計，否則檔案會太大反而影響效能
- 官方文件不夠詳細，assetsPath 這個參數得要看原始碼才知道
總結來說，注意設計和開發流程，Lottie 可以代替 Gif、CSS Sprite 來製作動畫，善用套件提供的方法控制播放流程，就可以在產品上展現生動的動畫了！
下一篇我們會教大家 Flutter 使用 Lottie 來製作 Splash Screen。請大家持續關注囉！
