文/彭宏豪，筆名/安哥拉
本文首發(fā)于「效率工具指南」
Hello 大家好，我是安哥。
今天想給大家介紹一個(gè)免費(fèi)下載各類動(dòng)畫(huà)素材的網(wǎng)站——LottieFiles，這些動(dòng)畫(huà)由國(guó)內(nèi)外的設(shè)計(jì)師制作并上傳，雖然是免費(fèi)的，但這些素材質(zhì)量都是杠杠的。
在平時(shí)的 PPT 匯報(bào)或者剪輯的視頻中適當(dāng)加入一些動(dòng)畫(huà)素材，豐富內(nèi)容形式，活潑畫(huà)面，或許可以讓你的作品增色不少。
01. 免費(fèi)可商用
在網(wǎng)站的首頁(yè)，有一句醒目的標(biāo)語(yǔ)，「你來(lái)到了世界上最大的免費(fèi)動(dòng)畫(huà)庫(kù)」，下方的小字聲明了動(dòng)畫(huà)的使用范圍：可以個(gè)人使用，也可以商業(yè)使用。
02. 下載動(dòng)畫(huà)
點(diǎn)開(kāi)任意一個(gè)動(dòng)畫(huà)，它會(huì)自動(dòng)無(wú)限循環(huán)播放當(dāng)前的動(dòng)畫(huà)，點(diǎn)擊進(jìn)度條右側(cè)的循環(huán)按鈕，可以取消無(wú)限循環(huán)，動(dòng)畫(huà)播放一次就自動(dòng)停止。
在動(dòng)畫(huà)下方，我們可以通過(guò)調(diào)整 Animation Speed、Background Color 的值，來(lái)分別修改動(dòng)畫(huà)的速度、背景顏色。
動(dòng)畫(huà)速度默認(rèn)為 1x，最快可調(diào)至 2.5 倍速，如果你覺(jué)得動(dòng)畫(huà)太慢的話，可以適當(dāng)提高這個(gè)值。
點(diǎn)擊右上角的 Download 按鈕，可以看到網(wǎng)站為每個(gè)動(dòng)畫(huà)提供了多種下載格式，包含 Lottie JSON、ZIP 壓縮包、GIF、自定義 GIF 和 MP4。
選擇好要下載的動(dòng)畫(huà)格式，在正式開(kāi)始下載之前，還需要進(jìn)行登錄或注冊(cè)賬號(hào)的操作，網(wǎng)站支持使用 Facebook 和 Google 賬號(hào)直接登錄。
如果你沒(méi)有這兩種賬號(hào)，可以使用個(gè)人郵箱注冊(cè)一個(gè)新的賬號(hào)。
03. 在線編輯動(dòng)畫(huà)
如果你對(duì)原作者上傳的動(dòng)畫(huà)不是特別滿意，可以點(diǎn)擊動(dòng)畫(huà)下方的「Edit Layer Colors」，來(lái)達(dá)到在線簡(jiǎn)單編輯動(dòng)畫(huà)的目的。
點(diǎn)擊編輯圖層顏色后，它會(huì)在瀏覽器中打開(kāi)一個(gè)新的標(biāo)簽頁(yè)，頁(yè)面中央是預(yù)覽窗口，右側(cè)可以修改動(dòng)畫(huà)的分辨率、幀率、動(dòng)畫(huà)的持續(xù)時(shí)間、背景顏色以及動(dòng)畫(huà)速度。
如果你修改了分辨率、幀率和持續(xù)時(shí)間這三個(gè)參數(shù)，修改好之后要點(diǎn)擊下方的 Update 按鈕進(jìn)行更新。
繼續(xù)往下滑動(dòng)右側(cè)的面板，這里可以修改組成動(dòng)畫(huà)不同圖層的顏色，點(diǎn)擊色值之后，它會(huì)彈出取色器面板，供你調(diào)整為自己喜歡的顏色。
對(duì)于用戶自己編輯過(guò)的動(dòng)畫(huà)，這個(gè)網(wǎng)站支持導(dǎo)出兩種格式，一種是 Telegram 的動(dòng)態(tài)貼紙格式 TGS，另一種是 Lottie Json 格式。
動(dòng)態(tài)貼紙格式 TGS 是 Telegram 專屬的表情包格式，在導(dǎo)出這種格式之前，它還有一些額外的限制：動(dòng)畫(huà)幀率必須為 30 或 60 幀，分辨率必須為 512 * 512 px。
自定義編輯后導(dǎo)出的另一種格式 Lottie Json，它是一種基于 Json 的動(dòng)畫(huà)格式，可以比較方便應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)或跨端設(shè)計(jì)中，但對(duì)普通人來(lái)說(shuō)，使用門檻還是比較高的。
如果你想將 Lottie Json 轉(zhuǎn)換為 MP4 格式，需要借助動(dòng)效軟件 After effects 和 AE 插件 bodymovin，將 Lottie Json 導(dǎo)入 AE，再?gòu)?AE 中導(dǎo)出 MP4 或者 Gif 等格式。
具體實(shí)現(xiàn)方法對(duì)我來(lái)說(shuō)超綱了，感興趣的朋友可以自行上網(wǎng)搜索相關(guān)的資料。
04. 將動(dòng)畫(huà)應(yīng)用到不同的平臺(tái)
這和我們上面說(shuō)到的 Lottie 動(dòng)畫(huà)有關(guān)，在頁(yè)面的下方，它給我們提供了動(dòng)畫(huà)的更多使用場(chǎng)景，例如用于網(wǎng)頁(yè)設(shè)計(jì)、Elementor、Webflow、iOS 和 Android 開(kāi)發(fā)。
以將動(dòng)畫(huà)應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)為例，點(diǎn)擊上面的 <html> 按鈕之后，它會(huì)打開(kāi)一個(gè)新的頁(yè)面，頁(yè)面提供了與動(dòng)畫(huà)相關(guān)的網(wǎng)頁(yè)代碼。
在將代碼復(fù)制到自己的項(xiàng)目之前，你還可以更改其中的一些參數(shù)，例如修改動(dòng)畫(huà)播放速度，下面的代碼中的 spped 屬性也會(huì)隨之修改。
這樣設(shè)計(jì)，可以說(shuō)是降低了不懂代碼的人使用代碼的成本哇，實(shí)在是太貼心了。
LottieFiles 官網(wǎng)地址：
https://lottiefiles.com/
以上就是本次想和你分享的內(nèi)容。
看完文章如果覺(jué)得對(duì)你有幫助的話，別忘了點(diǎn)擊底部的「點(diǎn)贊/在看」鼓勵(lì)一下我，謝謝。
效率工具指南：分享推薦效率工具，好的產(chǎn)品值得被更多人知道。
