在接下來(lái)的教程中，我將向您展示如何在無(wú)花果中創(chuàng)建Lottie動(dòng)畫(huà)。我們將使用兩種彩色設(shè)計(jì)來(lái)超越如何在無(wú)花果上進(jìn)行動(dòng)畫(huà)，然后向您展示如何從Figma到Lottie動(dòng)畫(huà)。您只需要一個(gè)免費(fèi)的無(wú)花果帳戶。如果您準(zhǔn)備學(xué)習(xí)如何在無(wú)花果中使用Lottie，那么讓我們潛入其中。

• 如何創(chuàng)建Lottie動(dòng)畫(huà)的起始框架和形狀
• 如何在無(wú)花果中的動(dòng)畫(huà)中添加星形
• 當(dāng)您在無(wú)花果中進(jìn)行動(dòng)畫(huà)時(shí)，如何正確組織資產(chǎn)
• 如何在無(wú)花果中創(chuàng)建動(dòng)畫(huà)
• 如何在無(wú)花果中創(chuàng)建Lottie動(dòng)畫(huà)
• 如何使用Figma在Lottie動(dòng)畫(huà)中使用文字
• 如何使用組件集在無(wú)花果中制作洛蒂動(dòng)畫(huà)
• 如何在無(wú)花果中創(chuàng)建文本動(dòng)畫(huà)
• 如何將洛蒂添加到無(wú)花果

1。如何創(chuàng)建Lottie動(dòng)畫(huà)的起始框架和形狀

步驟1

從框架工具（F）開(kāi)始，然后創(chuàng)建一個(gè)850 x 850 PX幀。

繼續(xù)使用橢圓工具（O） ，并使用它添加500 PX圓圈。將此形狀的填充顏色設(shè)置為＃ffb400。

在“圖層”面板中，將您的兩個(gè)圓圈重命名，如下所示。

步驟2

選擇您的框架，然后按Control-D四次，這將添加您所選框架的四個(gè)副本。為了使事情變得不那么擁擠，您可以選擇所有框架，并將間距設(shè)置為約150個(gè)PX 。

步驟3

如下所示，從前三個(gè)幀中調(diào)節(jié)黃圓圈的大小，并記住將它們移至它們所屬的框架中心。從第一和第五幀中選擇黃色圓圈，然后用較深的顏色代替黃色。

這將有助于動(dòng)畫(huà)設(shè)置動(dòng)畫(huà)的主要階段。后來(lái)，智能動(dòng)畫(huà)功能將填充缺失的幀。

2。如何在無(wú)花果中的動(dòng)畫(huà)中添加星形

步驟1

使用Star工具在第一幀的中央添加350 PX星形。使其白色，保持默認(rèn)的5點(diǎn)，將比率設(shè)置為50％ ，半徑為20 。

步驟2

確保仍然選擇您的星形形狀，然后按Control-C復(fù)制它。選擇其他四個(gè)幀，然后按Control-V添加相同的星形形狀。

從第二和第三幀中選擇星形，然后將填充顏色從白色更改為黃色。僅從第二幀中選擇恒星形狀，將其收縮至250 PX ，然后將其半徑降至16 。

3。當(dāng)您在無(wú)花果中進(jìn)行動(dòng)畫(huà)時(shí)，如何正確組織資產(chǎn)

步驟1

專(zhuān)注于您的第三幀，并使用橢圓工具（O）在您的星形周?chē)砑訋讉€(gè)黃色圓圈，大約如下所示。

步驟2

從第三幀中選擇圓并復(fù)制它們（ Control-C ）。選擇框架4，然后按Control-V粘貼圓，然后使其變?yōu)榘咨?

步驟3

移動(dòng)到框架2，選擇它，然后再次按Control-V粘貼到那套黃色圓圈。選擇一個(gè)圓圈，然后將它們移動(dòng)到星形后面。

同樣，移動(dòng)這些圓圈將有助于動(dòng)畫(huà)。這些圈子將開(kāi)始從恒星后面移動(dòng)到第3幀中指定的最終目的地。

步驟4

從第二幀中選擇所有這些小圓圈，然后復(fù)制它們（ Control-C ）。選擇幀1和幀5，然后按Control-V 。

正如我之前所說(shuō)，小圈子需要坐在星形后面。為了輕松執(zhí)行此操作，只需在五個(gè)幀上選擇所有的星形形狀，然后按]鍵將它們帶到各個(gè)層的前面即可。

步驟5

讓我們快速回顧一下，然后再學(xué)習(xí)如何在無(wú)花果上制作Lottie動(dòng)畫(huà)。第一件事首先：名字很重要。確保您要?jiǎng)赢?huà)的元素在所有層中具有相同的名稱(chēng)。同樣，對(duì)象順序的變化可能會(huì)破壞您的動(dòng)畫(huà)，因此請(qǐng)嘗試在整個(gè)層中保持相同的順序。

4。如何在無(wú)花果中創(chuàng)建動(dòng)畫(huà)

步驟1

現(xiàn)在，設(shè)計(jì)已經(jīng)完成，讓我們轉(zhuǎn)到原型并學(xué)習(xí)如何在無(wú)花果中進(jìn)行動(dòng)畫(huà)。首先從設(shè)計(jì)模式切換到原型模式。

選擇第一個(gè)幀并將其與第二個(gè)幀連接。設(shè)置交互設(shè)置，如下所示。正如我之前說(shuō)過(guò)的，智能動(dòng)畫(huà)會(huì)完成大多數(shù)魔術(shù)，因?yàn)樗畛淞藙?dòng)畫(huà)中缺少的框架。

步驟2

選擇第二幀并將其與第三幀連接。設(shè)置交互設(shè)置，如下圖所示。

步驟3

選擇第三幀并將其與第四幀連接。設(shè)置交互設(shè)置，如下所示。

步驟4

選擇第四幀，然后將其與第五幀連接。如下所示，設(shè)置交互設(shè)置。

步驟5

最后，將第五幀與第一個(gè)幀連接，并設(shè)置交互設(shè)置，如下所示。

5。如何在無(wú)花果中創(chuàng)建Lottie動(dòng)畫(huà)

步驟1

要將Figma動(dòng)畫(huà)轉(zhuǎn)換為L(zhǎng)ottie，您將需要Lottiefiles插件。

按Control-/打開(kāi)“快速操作”菜單。選擇插件和小部件部分，然后搜索Lottiefiles插件。

步驟2

單擊運(yùn)行按鈕將Lottiefiles插件添加到無(wú)花果。您需要與Lottiefiles建立一個(gè)帳戶，然后才能從Figma導(dǎo)出Lottie。

步驟3

設(shè)置帳戶并打開(kāi)Lottiefiles插件后，您會(huì)注意到需要選擇一個(gè)從Figma到Lottie動(dòng)畫(huà)的流程。

如果您還沒(méi)有一個(gè)，請(qǐng)確保您仍處于原型模式，并為第一幀添加流程。

步驟4

從下拉菜單中選擇首選流程。在這種情況下，只有一個(gè)，因此您不會(huì)找到太多麻煩，但是對(duì)于較大的設(shè)計(jì)，命名流程是一個(gè)很好的做法。

步驟5

選擇流程后，您將獲得您的Lottie動(dòng)畫(huà)的精美預(yù)覽。單擊“保存到”按鈕將在Lottiefiles.com上的Projects文件夾中保存動(dòng)畫(huà)。在這樣做之前，請(qǐng)注意，在您必須付費(fèi)以節(jié)省Lottie動(dòng)畫(huà)之前，有10個(gè)動(dòng)畫(huà)的限制。不要犯與我相同的錯(cuò)誤，并確保您選擇保存的動(dòng)畫(huà)是最終版本。不，刪除保存的動(dòng)畫(huà)不會(huì)重置限制。

6。如何使用Figma在Lottie動(dòng)畫(huà)中使用文本

步驟1

選擇文本工具（T）并使用它添加“加載”文本?？梢噪S意使用任何字體，并將大小設(shè)置為約80 ，然后打開(kāi)類(lèi)型設(shè)置彈出菜單以檢查蓋高度到基線按鈕。

步驟2

選擇橢圓工具（O）并使用它添加三個(gè)10個(gè)PX圓圈，如下所示。使用下圖中指示的填充顏色，然后專(zhuān)注于圖層面板。

作為一個(gè)很好的做法，您可以根據(jù)其顏色重命名每個(gè)圓圈。將橙色的圓圈放在黃色的一個(gè)下方，然后將紅色圓在橙色的圓下。

步驟3

選擇您的圓圈以及文本，然后將您的選擇變成復(fù)合路徑（ Alt-Control-K ）。重命名為“加載文本”。

步驟4

選擇圓圈并將它們?nèi)繉?duì)齊到黃色的左邊緣。

7。如何使用組件集在無(wú)花果上制作樂(lè)譜動(dòng)畫(huà)

步驟1

確保選擇了主組件，并添加一個(gè)變體。選擇默認(rèn)變體內(nèi)部的三個(gè)圓圈，并通過(guò)將填充顏色的不透明度降低到0％來(lái)使它們不可見(jiàn)。

步驟2

在組件集中添加第三個(gè)變體。選擇此新變體內(nèi)的橙色圓圈，然后使用右箭頭鍵向右移動(dòng)。在橙色圓圈和黃色的圓圈之間留下8個(gè)PX縫隙。

步驟3

在組件集中添加第四個(gè)變體。選擇此新變體內(nèi)的紅色圓圈，然后使用右箭頭鍵向右移動(dòng)。在這個(gè)紅色圓圈和橙色圓圈之間留下8個(gè)PX縫隙。

步驟4

在組件集中添加第五個(gè)變體。選擇此新變體中的紅色圓圈，然后將其移動(dòng)在橙色的后面。

將最后一個(gè)變體添加到組件集。在此新變體中選擇橙色圓圈，然后將其移動(dòng)到黃色的后面。

8。如何在無(wú)花果中創(chuàng)建文本動(dòng)畫(huà)

步驟1

從設(shè)計(jì)模式轉(zhuǎn)換為原型模式。首先，連接每個(gè)連續(xù)的變體，然后將最后一個(gè)變體與第一個(gè)變體連接。選擇所有連接并設(shè)置交互設(shè)置，如下所示。同樣，聰明的動(dòng)畫(huà)將發(fā)揮魔力。

步驟2

創(chuàng)建一個(gè)新的框架，使其紫色，然后從資產(chǎn)面板中拖動(dòng)“加載”文本組件。不要忘記在這個(gè)新框架中添加流程。

步驟3

最后，您可以按Control-/打開(kāi)快速操作，搜索Lottiefiles插件，然后將其打開(kāi)以預(yù)覽您的Lottie動(dòng)畫(huà)。

這是您的Lottie動(dòng)畫(huà)的外觀。如果您想學(xué)習(xí)如何創(chuàng)建“加載點(diǎn)”動(dòng)畫(huà)：如何創(chuàng)建Lottie加載動(dòng)畫(huà)，請(qǐng)查看本教程。

9。如何將樂(lè)天添加到無(wú)花果

步驟1

您可以將Lottie添加到無(wú)花果上，但是有一些局限性，因?yàn)闊o(wú)花果不支持直接播放JSON LOTTIE文件。您只能將Lottie動(dòng)畫(huà)添加為GIF或MP4文件，但請(qǐng)記住，您需要訂閱才能在無(wú)花果中導(dǎo)入MP4文件。

您可以使用Lottiefiles插件將保存的Lottie動(dòng)畫(huà)作為GIF插入，但是如果您沒(méi)有Lottiefiles訂閱，則導(dǎo)入的GIF的大小將有限制。

如果您選擇將保存的Lottie動(dòng)畫(huà)作為MP4文件導(dǎo)出，則適用同樣的限制。

如果您的Lottie動(dòng)畫(huà)是在After Effects中創(chuàng)建的，并且您擁有該文件，則可以將該動(dòng)畫(huà)保存為較大的GIF，然后將其導(dǎo)入無(wú)花果。

恭喜！你完成了

這是您的Lottie動(dòng)畫(huà)的外觀。希望您喜歡本教程，并可以在未來(lái)的項(xiàng)目中應(yīng)用這些技術(shù)。

隨意調(diào)整最終的Lottie動(dòng)畫(huà)并將其制作。既然您已經(jīng)學(xué)會(huì)了如何在無(wú)花果中使用Lottie，則可以前往Envato，在那里您可以找到有趣的解決方案來(lái)改善動(dòng)畫(huà)。

想了解更多嗎？

從初學(xué)者到中級(jí)級(jí)別，我們都有關(guān)于Envato Tuts的大量教程。看看！

以上是如何在無(wú)花果中使用Lotties的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！