網頁設計上也應該使用 Lottie 動畫

Lottie 是由 Airbnb 全球知名的民宿出租平台所開發的動畫解決方案，主要是因為在原生 App(iOS/Android) 上建立動畫是一件非常的困難繁瑣的事。而使用 Lottie 的話，設計師只需要在 After Effects 上製作動畫，再輸出成 JSON 格式的檔案給工程師匯入即可！

就在 2021 年 10 月的 Adobe MAX 發表會，旗下的 UI/UX 設計工具 Adobe XD 也正式支援 Lottie 插件，加上 Figma 也早在 2020 就已支援。幾乎是確立了 Lottie 在介面設計界中的動畫地位。雖然在 Web 上可以使用 HTML5 Canvas 也有 Adobe Animate 的編輯工具可以用，但是 Canvas 主要是使用 Javascript 來產生動畫，在跨平台上就不如 Lottie，輸出檔案時也不像 Lottie 將動畫腳本單獨輸出成 JSON 檔，而 Canvas 動畫通常是和程式碼混雜在一起的。

也就是一開始就選用 Lottie 為動畫解決方案，介面設計裡的動畫就可以通用在 App 與 Web 間，或是 Lottie 有支援的裝置平台上！另外就是 Lottie 將動畫檔案化，使用 JSON 檔就像使用 GIF 動畫檔一樣容易，方便保存也方便傳輸交換。因此在 Web 網頁設計上也應該選用 Lottie 動畫為標準。

在網頁上使用 Lottie 也非常簡單，只要加載以下 js

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

接著使用 <lottie-player> 的 html 標籤，將 Lottie Json 檔案載入

<lottie-player src="https://assets9.lottiefiles.com/datafiles/gUENLc1262ccKIO/data.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop="true" controls="true" autoplay="true"></lottie-player>

範例結果如下

網頁標籤中可以使用以下屬性進行簡單的設置：

background - 背景顏色，使用 HEX 例如 #000000 或者使用透明色 transparent
mode - 播放模式，預設值為 normal 順向播放或設置 bounce 會順向播完再倒轉逆向播放
speed - 播放速度，預設值為 1
controls - 控制介面，預設值為 false
autoplay - 自動播放動畫，預設值為 false
loop - 循環播放動畫，預設值為 false

如果要使用 Javascript 進行控制也可以，首先對 <lottie-player> 目標上添加 id 名稱，在賦予變數，再往後添加方法函式名稱即可

 const player = document.querySelector("lottie-player");

player.play() - 播放動畫
player.stop() - 停止動畫
player.seek('10') - 跳轉至影格數，也可以使用百分比
plater.snapshot(true) - 截取目前畫面保存為 SVG
player.toggleLooping() - 切換循環播放動畫
player.togglePlay() - 切換動畫播放

詳情可參考 lottie-player 的 Github 說明文件。如果想要更多互動事件，例如捲動頁面、滑鼠移入、點擊... 等，還可以使用 Lottie Interactivity 添加更多互動~

Lottie 官方文件 | Lottie 的 AE 外掛 | LottieFiles.com