國際噗通標準色

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