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

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

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

步驟1

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

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

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

步驟2

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

步驟3

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

這將有助于動畫設(shè)置動畫的主要階段。后來，智能動畫功能將填充缺失的幀。

2。如何在無花果中的動畫中添加星形

步驟1

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

步驟2

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

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

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

步驟1

專注于您的第三幀，并使用橢圓工具（O）在您的星形周圍添加幾個黃色圓圈，大約如下所示。

步驟2

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

步驟3

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

同樣，移動這些圓圈將有助于動畫。這些圈子將開始從恒星后面移動到第3幀中指定的最終目的地。

步驟4

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

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

步驟5

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

4。如何在無花果中創(chuàng)建動畫

步驟1

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

選擇第一個幀并將其與第二個幀連接。設(shè)置交互設(shè)置，如下所示。正如我之前說過的，智能動畫會完成大多數(shù)魔術(shù)，因?yàn)樗畛淞藙赢嬛腥鄙俚目蚣堋?

步驟2

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

步驟3

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

步驟4

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

步驟5

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

5。如何在無花果中創(chuàng)建Lottie動畫

步驟1

要將Figma動畫轉(zhuǎn)換為Lottie，您將需要Lottiefiles插件。

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

步驟2

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

步驟3

設(shè)置帳戶并打開Lottiefiles插件后，您會注意到需要選擇一個從Figma到Lottie動畫的流程。

如果您還沒有一個，請確保您仍處于原型模式，并為第一幀添加流程。

步驟4

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

步驟5

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

6。如何使用Figma在Lottie動畫中使用文本

步驟1

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

步驟2

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

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

步驟3

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

步驟4

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

7。如何使用組件集在無花果上制作樂譜動畫

步驟1

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

步驟2

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

步驟3

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

步驟4

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

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

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

步驟1

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

步驟2

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

步驟3

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

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

9。如何將樂天添加到無花果

步驟1

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

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

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

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

恭喜！你完成了

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

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

想了解更多嗎？

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

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