前端動畫解決方案 - 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。請大家持續關注囉!