文/彭宏豪，筆名/安哥拉
本文首發(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ō)撰糠，使用門(mén)檻還是比較高的酥馍。
如果你想將 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)品值得被更多人知道弛姜。
