在接下來的教程中，我將向您展示如何在無花果中創(chuàng)建Lottie動畫。我們將使用兩種彩色設(shè)計來超越如何在無花果上進(jìn)行動畫，然後向您展示如何從Figma到Lottie動畫。您只需要一個免費的無花果帳戶。如果您準(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點，將比率設(shè)置為50％ ，半徑為20 。

步驟2

確保仍然選擇您的星形形狀，然後按Control-C複製它。選擇其他四個幀，然後按Control-V添加相同的星形形狀。

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

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

步驟1

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

步驟2

從第三幀中選擇圓並複制它們（ 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ù)，因為它填充了動畫中缺少的框架。

步驟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

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

步驟3

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

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

步驟4

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

步驟5

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

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

步驟1

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

步驟2

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

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

步驟3

選擇您的圓圈以及文本，然後將您的選擇變成複合路徑（ 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)建“加載點”動畫：如何創(chuàng)建Lottie加載動畫，請查看本教程。

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

步驟1

您可以將Lottie添加到無花果上，但是有一些局限性，因為無花果不支持直接播放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動畫的外觀。希望您喜歡本教程，並可以在未來的項目中應(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)文章！