選單
如果大家有留意的話
《會長動畫筆記》的首頁，更新了一些「會動的圖標」
一般情況下，要做這種「循環動圖」，普遍有兩個方法
第一個方法是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導演的資料，認識到她🤣