原文地址：https://alphahinex.github.io/2024/03/24/lottie/
description: "Lottie 實(shí)戰(zhàn)"
date: 2024.03.24 10:26
categories:
- Web
tags: [HTML, Web, JavaScript]
keywords: lottie, JSON, LottieFiles, LottieDocs, Animation, Gif, SVG
Lottie 是什么捧灰？
簡單來說巷折，它是一種使用 JSON 表示的動(dòng)畫格式舱卡，由 Airbnb 推出。
- 具有更小的文件尺寸
- 無限縮放
- 跨平臺(tái)陪毡、易使用
- 動(dòng)畫元素可響應(yīng)交互事件
相關(guān)資料
- LottieDocs 是關(guān)于 Lottie 格式的指南文檔站點(diǎn)米母。
- LottieFiles 是一個(gè)讓動(dòng)畫制作者和開發(fā)者即時(shí)創(chuàng)作、測(cè)試毡琉、分享及展示 Lottie 動(dòng)畫作品的網(wǎng)站爱咬。
-
dotLottie 是一個(gè)開源文件格式，可以聚合一個(gè)或多個(gè) Lottie 文件及其關(guān)聯(lián)資源至一個(gè)壓縮的
.lottie格式中绊起。 - LottieDocs: Everything About the Lottie File Format
如何開始？
社區(qū)資源
從 LottieFiles 動(dòng)畫庫 中可以找到豐富的 Lottie 格式資源燎斩，并可利用 調(diào)色板 或 Lottie Editor 進(jìn)行二次創(chuàng)作虱歪。
制作工具
從專業(yè)工具到在線 Web 編輯器蜂绎，LottieFiles 提供了多種創(chuàng)建動(dòng)畫的方式：
Lottie from Scratch 介紹了使用上面的 Builder 工具從頭制作一個(gè) Lottie 動(dòng)畫的過程。
如何使用笋鄙？
在設(shè)計(jì)师枣、開發(fā)及生產(chǎn)力工具中，都可以很方便的使用 Lottie 動(dòng)畫：
快速預(yù)覽
拿到 Lottie 的 JSON 內(nèi)容后萧落，可以在 JSON Editor 中快速預(yù)覽：
Web 中使用
在 Web 中展現(xiàn) Lottie 動(dòng)畫可分兩步：
-
引入 lottie-player Web Component
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> -
加入
<lottie-player>標(biāo)簽践美，src屬性設(shè)置 Lottie json 文件 URL：<lottie-player src="https://lottie.host/31b0c1dc-5ff1-45df-b96c-fa1200c8c554/QTcdtW0332.json" background="transparent" speed="1" style="width: 300px; height: 300px" direction="1" mode="normal" loop controls autoplay> </lottie-player>也可以通過代碼直接為 player 設(shè)置 json 內(nèi)容：
<lottie-player id="json-content-player" autoplay loop mode="normal" style="width: 320px"></lottie-player> <script> const jcp = document.querySelector("#json-content-player") jcp.load('{"v":"5.3.4","fr":30,"ip":0,"op":38,...}') </script>
相關(guān)資料
- How to Add Lottie Animations to a Website with HTML
- How to Add Lottie Animations Anywhere: Web, Mobile Apps, Design Mockups and More
- How to Optimize Lottie Files for Faster Page Load Speeds
轉(zhuǎn)換工具
LottieFiles 提供了很多 Lottie 相關(guān)的轉(zhuǎn)換工具：
交互示例
Interactivity Guide 中提供了豐富的 Lottie 動(dòng)畫交互指引，如下面這個(gè)動(dòng)畫包含了三段內(nèi)容：一只不斷奔跑的鴿子找岖、一個(gè)爆炸效果和羽毛掉落過程陨倡。點(diǎn)擊鴿子可看到交互效果（閱讀原文查看更好的動(dòng)畫及交互效果）：
Running pigeon by Christina Bublyk, explosion by Viktor Anisimov, feathers by Daniel Teasdale
