如果大家有留意的話
《會長動畫筆記》的首頁,更新了一些「會動的圖標」
一般情況下,要做這種「循環動圖」,普遍有兩個方法
第一個方法是gif格式
第二個方法是影片循環播放
而今天要講的主題,並不是以上的任何一種
而是一個相對新式的方法:Lottie
簡單來說
lottie是一種「針對網頁」的動畫應用技術(目前也主要應用於網頁)
能做到gif循環圖的效果,但效益更好
基於java script
把After effects做好的向量動畫,按幾下按鈕,就可以無壓損輸出到網頁
最大的賣點是:用「超小的檔案尺寸」,顯示「最銳利的圖像」
為了讓大家看到差異,會長準備了示範例子
首頁的Blender logo,分別以gif、mp4和lottie的形式來呈現
gif – 1,688kb
mp4 – 499kb
lottie – 7kb
一般來說,能在保持品質不變的前提下,檔案是越小越好
對於網站製作來說,檔案大小是致命的因素
檔案越大,代表網頁讀取越久
除了增加讀者的數據使用量外,更會影響seo分數(這影響能否在Google搜索中排前)
以上方的logo例子來看
如果以gif格式來呈現的話,500×500像素,檔案大小是1688kb
而Lottie圖像,由於是java矢量圖,檔案大小只有7kb,足足比gif圖小241倍!
就跟Adobe Illustrator (簡稱Ai)製作的vector圖形一樣
Lottie也是向量圖像的一種
也就是說,Lottie並沒有像素的限制,可隨意拉大拉小
而且不會有任何由於拉扯造成的 模糊,可以隨意拉大拉小調整構圖
同一個檔案,既可以拿來做迷你logo,也可以拿來做首頁大圖
雖然lottie是一個基於java script的技術
但我們可以藉助免費的ae Plugin(插件),把ae動畫轉化成Lottie所需的json文件
十分user friendly
推薦下列兩款Plugin,分別是Bodymovin和Lottiefiles
Bodymovin是一款相對簡單的Lottie插件
只要做好ae動畫,就可以交出bodymovin,輸出成lottie需要的json檔案
支持離線輸出
而LottieFiles也有推出自己的同名Plugin,主打的好處是可以和LottieFiles資源庫連接
可以直接在ae把動畫上傳到LottieFiles網站
然後透過網頁連結來使用Lottie
又或者
可以直接在ae裡下載其他人分享的Lottie源文件,在ae修改完,再用到Project裡
接下來,來簡單示範一下lottie的製作和使用方式
會長使用的是Bodymovin,此篇文章也會Bodymovin作為示範插件
兩個插件都具備「把Ae動畫輸出成Lottie所需的Json文件」的功能
在Ae>Window>Extensions裡找到並開啟Bodymovin後
在Comp名字的左邊,有一個selected欄,點一下
圓圈變綠代表已選擇
沒有設置的話,按render會沒有反應喔~
經過幾秒鐘的轉換,ae動畫就已經輸出成json文件
可以直接放到網站用了
會長搭建網站,使用的是Wordpress + Elementor組合
裡面直接就有「Lottie動畫元件」的功能
Elementor自帶的Lottie功能就很夠用了
有很多自定義選項
如果你的Lottie是一個循環動畫的話,記得在選項裡勾選「循環播放」
會長是使用WordPress的Elementor Pro,非常有效的網頁製作工具,自帶Lottie功能
除了Elementor以外,wordpress也有其他Plugin是支援使用Lottie
Wix也是有Lottie功能
正如之前所說,所有Lottie文件都是基於Java Script編寫的
如果直接把json打開,會看到一堆密密麻麻的json語言 XD
如果想在Lottie動畫裡加入像素圖,或者是ae自帶的效果
就未必能100%輸出到Lottie了
為了測試目前Lottie的支援程度,會長準備了下面這例子
一個簡單動畫:會長logo在循環轉圈
如果直接輸出,就會丟失圖片,出現以下的情況
畢竟json無法直接描述pixels
丟失圖片的Lottie
為了在Lottie能展示外部圖片
我們需要直接把圖片嵌入到json裡面
在ae的bodymovin插件裡,按下設定
在「Assets」的欄目下,點下「Include in json」
雖然json檔案會變大(因為要加入圖片)
但成功把外部圖片加入Lottie了!
lottie - 107kb
雖說檔案變大,但也是從原來的10kb以下,變成107kb而已
同樣的循環動畫,若是以gif來呈現,大小則是2.91mb(約是2910kb)
原理很簡單
Lottie的做法是,「一張圖片」+「Json來描述動畫信息」
而Gif的做法是,直接把「很多張圖片」組合成一個檔
下圖顯示了Lottie能支持的Ae特效
Lottie目前支持的ae特效還十分有限
主要很多都是顏色上的效果,例如fill和tritone
比較能玩花樣的就是Gaussian Blur了
Gaussian Blur 能順利輸出到 Lottie
如果在ae裡做了lottie不支持的特效,例如glow(發光)
輸出來的lottie就會像下面,本體的動畫還會在,但特效就沒有
glow等效果無法轉換成Lottie
Expression也是另一個Ae常用的做法
(感謝Hans Chiu讓我想到)
會長這次使用了wiggle
一個讓任何數值「波動起來」的expression
然後我們可以控制wiggle的速度與幅度
在Position和Scale各自加上wiggle,就會有以下的效果:
如果沒有額外做設定,直接輸出的話,expression會變得……
有點瘋狂? XD
(會長原本以為expression會直接不算,只出現靜止畫面)
anyway
我們可以在bodymovin的輸出設定裡
在 Expression options 的欄目下找到 Convert expressions to keyframes
點選了把表達式先轉換成keyframe之後
輸出的結果就比較貼近預期
順便這次也測試了Ae內建的Motion Blur也是無法轉移到Lottie的
總的來說,Lottie就是一個物美價廉的,用來展示網頁動畫的技術
非但檔案大小比常用的gif小百倍
而且是沒有大小限制,怎麼放大都不會糊的是矢量圖像
現在很多創作者都會有一個「屬於自己的網站」
對於像會長這樣,喜歡精心打造自己小天地的人來說,Lottie的確是一大恩物
在完結之前,有一個小小題外話…
官方網站有提及到這個問題,但只有短短兩行字
似乎是和德國的一個導演Lotte Reiniger有關
我猜這樣命名,是為了讓更多人知道這位導演吧
事實上也的確成功了
會長我就是看了官網的介紹之後,去查找了Lotte導演的資料,認識到她🤣