似gif但比gif更好|ae動畫網頁新技術|Lottie

如果大家有留意的話

《會長動畫筆記》的首頁,更新了一些「會動的圖標」

一般情況下,要做這種「循環動圖」,普遍有兩個方法

第一個方法是gif格式

第二個方法是影片循環播放

而今天要講的主題,並不是以上的任何一種

而是一個相對新式的方法:Lottie

Lottie是甚麼?

簡單來說

lottie是一種「針對網頁」的動畫應用技術(目前也主要應用於網頁)

能做到gif循環圖的效果,但效益更好

基於java script

把After effects做好的向量動畫,按幾下按鈕,就可以無壓損輸出到網頁

最大的賣點是:用「超小的檔案尺寸」,顯示「最銳利的圖像」

實例對比|Lottie vs Gif vs Mp4

為了讓大家看到差異,會長準備了示範例子

首頁的Blender logo,分別以gif、mp4和lottie的形式來呈現

gif – 1,688kb

mp4 – 499kb

lottie – 7kb

好處1:檔案大小

一般來說,能在保持品質不變的前提下,檔案是越小越好

對於網站製作來說,檔案大小是致命的因素

檔案越大,代表網頁讀取越久

除了增加讀者的數據使用量外,更會影響seo分數(這影響能否在Google搜索中排前)

以上方的logo例子來看

如果以gif格式來呈現的話,500×500像素,檔案大小是1688kb

而Lottie圖像,由於是java矢量圖,檔案大小只有7kb,足足比gif圖小241倍!

好處2:矢量圖像

就跟Adobe Illustrator (簡稱Ai)製作的vector圖形一樣

Lottie也是向量圖像的一種

也就是說,Lottie並沒有像素的限制,可隨意拉大拉小

而且不會有任何由於拉扯造成的 模糊,可以隨意拉大拉小調整構圖

同一個檔案,既可以拿來做迷你logo,也可以拿來做首頁大圖

我需要懂得Java Script嗎?

不需要,因為有免費Plugin的輔助

雖然lottie是一個基於java script的技術

但我們可以藉助免費的ae Plugin(插件),把ae動畫轉化成Lottie所需的json文件

十分user friendly

Ae轉Lottie|插件推薦

推薦下列兩款Plugin,分別是Bodymovin和Lottiefiles

Bodymovin是一款相對簡單的Lottie插件

只要做好ae動畫,就可以交出bodymovin,輸出成lottie需要的json檔案

支持離線輸出

Bodymovin有登錄在兩個平台

大家可以直接在aescript下載,然後手動安裝插件

或者直接在adobe官方的ae plugin區裡選擇安裝,這樣adobe就會自動安裝ae插件

LottieFiles本身是一個包含大量Lottie動畫的資源網站

有提供免費或付費的Lottie

大家可以先當是Lottie界的Freepik來理解

而LottieFiles也有推出自己的同名Plugin,主打的好處是可以和LottieFiles資源庫連接

可以直接在ae把動畫上傳到LottieFiles網站

然後透過網頁連結來使用Lottie

又或者

可以直接在ae裡下載其他人分享的Lottie源文件,在ae修改完,再用到Project裡

Ae輸出lottie動畫流程

接下來,來簡單示範一下lottie的製作和使用方式

會長使用的是Bodymovin,此篇文章也會Bodymovin作為示範插件

兩個插件都具備「把Ae動畫輸出成Lottie所需的Json文件」的功能

1. 選擇「需要輸出成Lottie的Comp」

在Ae>Window>Extensions裡找到並開啟Bodymovin後

在Comp名字的左邊,有一個selected欄,點一下

圓圈變綠代表已選擇

2. 設置輸出路徑

沒有設置的話,按render會沒有反應喔~

3. 按下render

經過幾秒鐘的轉換,ae動畫就已經輸出成json文件

可以直接放到網站用了

4. 使用到網站裡

會長搭建網站,使用的是Wordpress + Elementor組合

裡面直接就有「Lottie動畫元件」的功能

wordpress裡的Elementor插件

Elementor自帶的Lottie功能就很夠用了

有很多自定義選項

如果你的Lottie是一個循環動畫的話,記得在選項裡勾選「循環播放」

elementor裡的Lottie選項設置
elementor裡的Lottie選項設置

支援Lottie的平台

會長是使用WordPress的Elementor Pro,非常有效的網頁製作工具,自帶Lottie功能

除了Elementor以外,wordpress也有其他Plugin是支援使用Lottie

Wix也是有Lottie功能

Lottie的限制

正如之前所說,所有Lottie文件都是基於Java Script編寫的

如果直接把json打開,會看到一堆密密麻麻的json語言 XD

直接打開json會看到一大堆json語法

Lottie只支援「能透過Java語言描述」的畫面

如果想在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的做法是,直接把「很多張圖片」組合成一個檔

測試:Ae特效

下圖顯示了Lottie能支持的Ae特效

Lottie目前支持的ae特效還十分有限

主要很多都是顏色上的效果,例如fill和tritone

比較能玩花樣的就是Gaussian Blur了

Gaussian Blur 能順利輸出到 Lottie

如果在ae裡做了lottie不支持的特效,例如glow(發光)

輸出來的lottie就會像下面,本體的動畫還會在,但特效就沒有

glow等效果無法轉換成Lottie

測試:Expression(表達式)

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的確是一大恩物

在完結之前,有一個小小題外話…

為甚麼會叫Lottie?

官方網站有提及到這個問題,但只有短短兩行字

似乎是和德國的一個導演Lotte Reiniger有關

我猜這樣命名,是為了讓更多人知道這位導演吧

事實上也的確成功了

會長我就是看了官網的介紹之後,去查找了Lotte導演的資料,認識到她🤣