在本教程中，我們將使用Sketch創(chuàng)建基本形狀和原理，以快速創(chuàng)建簡單的自定義加載動畫。（這些都適用于Mac應(yīng)用程序） 你將學(xué)習(xí)如何創(chuàng)建Trello，F(xiàn)lickr，Slack等使用的豐富多彩的加載動畫。

最初被稱為動態(tài)瀏覽圖示，加載動畫用于指示數(shù)據(jù)記錄或渲染界面的進(jìn)度。雖然你可以通過使用一個沉悶的進(jìn)度條來表明這一點，但那些日子已經(jīng)過去了。

使用CSS，jQuery或簡單動畫GIF的精心制作的動畫是激活你的界面并為你的產(chǎn)品添加個性的機(jī)會。

人性化的動畫可以讓你的用戶等待你的加載內(nèi)容。好的加載動畫有助于管理期望，并通過保持興趣來改善用戶體驗。

在本教程中，我們將使用Sketch創(chuàng)建基本形狀和原理，以快速創(chuàng)建簡單的自定義加載動畫。（這些都適用于Mac應(yīng)用程序）?你將學(xué)習(xí)如何創(chuàng)建Trello，F(xiàn)lickr，Slack等使用的豐富多彩的加載動畫。

Let’s get to?it!

1、松弛加載動畫

在Sketch上，跟蹤四邊形圓形的正方形，邊框為50px，或者每個圓角為100px。它們應(yīng)該看起來像是完美的圓形，但是我們使用圓角的正方形在動畫中創(chuàng)建線條拉伸效果。

放置四個形狀，以創(chuàng)建一個假想的方形，每側(cè)之間的距離為150px。應(yīng)用四種不同的顏色（＃35BA90綠色，＃69CADD藍(lán)色，＃EBA900黃色和＃E20661粉色）。

將形狀導(dǎo)入原理，對它們進(jìn)行分組，然后單擊“創(chuàng)建組件”以嵌套組。

進(jìn)入嵌套組并旋轉(zhuǎn)畫板15度。然后選擇每個單獨的圓圈并將其旋轉(zhuǎn)回其原始位置（向后15度）。這樣會在直線上產(chǎn)生拉伸效果。

對畫板應(yīng)用“自動”觸發(fā)，然后將每個圓角矩形拉伸到畫板的對面，長度為295px。給兩幅畫板上的每個形狀提供75％的不透明度。

對第二張畫板應(yīng)用另一個“自動”觸發(fā)。在新的畫板上，將每行減少到原來的50px寬度，但與其原始位置相反。

使用“自動”觸發(fā)將最后一個畫板鏈接到第一個。點擊“回到主頁”按鈕預(yù)覽最終結(jié)果。

提示：當(dāng)你返回“主頁”時，你可以將主組旋轉(zhuǎn)30度，看起來更像是松弛。此外，你可以更改“動畫”面板中的動畫腳步，并應(yīng)用“輕松兩者”效果來順利過渡。

相關(guān)鏈接：https://www.youtube.com/watch?v=Qi64vUqJKAw

2、Trello加載動畫

使用Sketch，追蹤一個100px的藍(lán)色方塊。畫一個60px寬×高140px的白色矩形。將其與上一個正方形的左上角對齊，頂部和左邊距為30px。復(fù)制該白色矩形，將其與正方形的右側(cè)對齊，右邊距為30px，并將其高度縮小至70px。

將畫板導(dǎo)入原理并應(yīng)用“自動”觸發(fā)來創(chuàng)建一個新的關(guān)鍵幀。在新的藝術(shù)板上，反轉(zhuǎn)白色矩形的高度（使左矩形高70px，正方形140px）。在“動畫”面板中應(yīng)用“輕松雙向”效果，以順利過渡。

相關(guān)鏈接：https://www.youtube.com/watch?v=0PHiYXKPm9Y

3、滾動圈

在Sketch上追蹤一個圓。用“Dash”和“Gap”值應(yīng)用10px邊框，且沒有填充。對邊框使用“角度漸變”顏色，這將突出稍后你將創(chuàng)建的旋轉(zhuǎn)效果。

打開一個新的原則文件，并使用“導(dǎo)入”按鈕從Sketch傳送圓。在一行中應(yīng)用兩個“自動”觸發(fā)器。

要創(chuàng)建旋轉(zhuǎn)效果，請選擇中間畫板中的圓，并將其的“角度”值更改為360度。然后選擇第三個圓圈，并在左側(cè)面板中給出不同的名稱（即“復(fù)制”），這將會造成無限旋轉(zhuǎn)。

最后，將第三個畫板與另一個“自動”觸發(fā)器連接起來。應(yīng)用“線性”轉(zhuǎn)換到畫板1和2之間的時間軸。檢查你在預(yù)覽窗口中剛創(chuàng)建的動畫。

相關(guān)鏈接：https://www.youtube.com/watch?v=kDmmWvz5e3I

4、Flickr加載動畫

并排跟蹤一個藍(lán)色圓圈和一個粉紅色的圓圈。將它們導(dǎo)入原理并應(yīng)用“自動”觸發(fā)來創(chuàng)建一個新的畫板。

反轉(zhuǎn)圓圈的位置并應(yīng)用新的“自動”觸發(fā)來創(chuàng)建第三個畫板。在新的畫板上，反轉(zhuǎn)左面板上圓圈層的順序。

應(yīng)用第三個“自動”觸發(fā)器創(chuàng)建第四個畫板。在最后一個畫板上，再次反轉(zhuǎn)圓圈的位置，并將最后一個“自動”觸發(fā)器從最后一個畫板應(yīng)用到初始畫面。

相關(guān)鏈接：https://www.youtube.com/watch?v=7azaIHTykCI

5、加載類型

在“原則”上創(chuàng)建一個新項目，并使用“文本”工具寫入“LOADING”。將文本對準(zhǔn)左側(cè)，并將其垂直居中在畫板中。

連續(xù)五次施加“自動”觸發(fā)。將第五個觸發(fā)器從最后一個畫板循環(huán)回到初始畫板。

從初始畫板開始并向右移動，編輯每個畫板上的文本，分別添加原始“LOADING”文本旁邊的0，1，2，3，2和一個句點。畫板的進(jìn)度應(yīng)該如下所示：

LOADING LOADING. LOADING.. LOADING… LOADING.. LOADING.

現(xiàn)在，你可以預(yù)覽剛創(chuàng)建的動畫。

相關(guān)鏈接：https://www.youtube.com/watch?v=ct7zSm2TadM

6、脈沖點

跟蹤一個60px的點。復(fù)制并粘貼一個點，并將其放在右邊的60px。確保兩個點，包括60px的差距，完美地集中在你的畫板上。

連續(xù)四次應(yīng)用“自動”觸發(fā)。

在第二張畫板上，將第二個點縮小到30px。

在第三個畫板上，將第二個點縮小到0px，第一個縮小到30px。

在第四個畫板上，將第二個點縮放到30px，并將第一個點縮小到0px。

在第五張畫板上，將第一個點縮小至30px，并連接到第一塊“自動”觸發(fā)的畫板上。

相關(guān)鏈接：https://www.youtube.com/watch?v=_6HTgJAvyrM

7、滾動點

在六邊模具上放置五個點。將畫板導(dǎo)入原理并將其置于中心位置。

在畫板上應(yīng)用“自動”觸發(fā)。

在新的畫板上，旋轉(zhuǎn)一組點360度。

使用“自動”觸發(fā)將第二個畫板鏈接回第一個。

相關(guān)鏈接：https://www.youtube.com/watch?v=2i9k08-0dTU

8、脈動圈

開始于一個50px圓圈，中心對齊在一個150px的圓圈內(nèi)，邊框為5px，且沒有填充。

連續(xù)三次施加“自動”觸發(fā)。

在第一幅畫板上，將線圈縮放至50px，將內(nèi)圓縮放至10px。

在第三個畫板上，將線圈縮放到200px，并給出0％的不透明度。將內(nèi)圈縮放到150px，并給出50％的不透明度。

在最后一個畫板上，將內(nèi)圈縮放到200px，并給出0％的不透明度。將線圈縮放至50px，并賦予其25％的不透明度。

對最后一張畫板應(yīng)用“自動”觸發(fā)。將內(nèi)圈縮小到10px，不透明度為50％。

使用“自動”觸發(fā)將最后一個畫板鏈接到第一個。

相關(guān)鏈接：https://www.youtube.com/watch?v=ESSAfQ7FLN8

9、跳點

將高達(dá)50px的三個完美圓圈排成一列，間距為50px。

應(yīng)用“自動”觸發(fā)。在第二幅畫板上，將第一個圓圈移動50px。

對第二張板應(yīng)用“自動”觸發(fā)。在第三個畫板上，選擇前兩個圓圈并將其移動50px。三個圈子應(yīng)該在一條對角線上。

對“第三板”應(yīng)用“自動”觸發(fā)。在第四幅畫板上，將第一個圓圈向下移動50px。選擇最后兩個圈子并將其移動50px。

在第四塊板上應(yīng)用“自動”觸發(fā)。在第五張畫板上，向前移動前兩個圓圈50px。選擇最后一個圓圈并將其移動50px。

在第五張板上應(yīng)用“自動”觸發(fā)。在第六幅畫板上，將最后兩個圓圈移動到50px。

最后，回到第一幅畫板，向上移動第一個點50px，并將最后一個畫板與“自動”觸發(fā)器連接。你可以預(yù)覽最終結(jié)果。

相關(guān)鏈接：https://www.youtube.com/watch?v=bIYMHXsmSIM

10、經(jīng)典的加載機(jī)

在Sketch中跟蹤一個圓，并給它一個20px的灰色邊框，沒有填充。

將同一個圓的副本粘貼在其上，并將副本填充更改為不同的顏色。對于這個例子，我們將使用藍(lán)色。

跟蹤一個四分之一的藍(lán)色圓圈的正方形。將矩形圖層移動到圓形圖層下方，并將“面具”應(yīng)用于矩形圖層。

轉(zhuǎn)到原則，并使用“導(dǎo)入”按鈕導(dǎo)入Sketch圖稿。

對第一幅畫板應(yīng)用“自動”觸發(fā)，并旋轉(zhuǎn)藍(lán)色圓圈360度。

對第二張畫板應(yīng)用第二個“自動”觸發(fā)。將生成的第三個圓形圖層重命名為“復(fù)制”，并將其鏈接回第一個畫板，并顯示“自動”觸發(fā)。

相關(guān)鏈接：https://www.youtube.com/watch?v=UHAQ1ftzIaU

結(jié)論

一旦你學(xué)會了創(chuàng)建這些加載動畫，你應(yīng)該對自己的能力感到自信，用這里學(xué)到的技能把自己的應(yīng)用程序創(chuàng)建為一個獨特的動畫。

有了Sketch和Principle這些富有想象力的便捷工具，你可以在幾分鐘內(nèi)創(chuàng)建一個獨特的加載動畫，使之與你設(shè)計的應(yīng)用程序相匹配。你的用戶也會感謝在工作中應(yīng)用程序指示器的專業(yè)和友好。

原文作者：Tidjane?Tall

原文地址：https://uxplanet.org/practical-guide-to-creating-custom-animated-loading-indicators-55d68d735edc

譯者：SKYUI

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。