国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

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

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

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

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

在本教程中，我們將使用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上，跟蹤四邊形圓形的正方形，邊框?yàn)?0px，或者每個(gè)圓角為100px。它們應(yīng)該看起來像是完美的圓形，但是我們使用圓角的正方形在動畫中創(chuàng)建線條拉伸效果。

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

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

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

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

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

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

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

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

2、Trello加載動畫

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

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

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

3、滾動圈

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

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

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

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

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

4、Flickr加載動畫

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

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

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

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

5、加載類型

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

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

從初始畫板開始并向右移動，編輯每個(gè)畫板上的文本，分別添加原始“LOADING”文本旁邊的0，1，2，3，2和一個(gè)句點(diǎn)。畫板的進(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、脈沖點(diǎn)

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

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

在第二張畫板上，將第二個(gè)點(diǎn)縮小到30px。

在第三個(gè)畫板上，將第二個(gè)點(diǎn)縮小到0px，第一個(gè)縮小到30px。

在第四個(gè)畫板上，將第二個(gè)點(diǎn)縮放到30px，并將第一個(gè)點(diǎn)縮小到0px。

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

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

7、滾動點(diǎn)

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

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

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

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

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

8、脈動圈

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

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

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

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

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

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

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

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

9、跳點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

有了Sketch和Principle這些富有想象力的便捷工具，你可以在幾分鐘內(nèi)創(chuàng)建一個(gè)獨(dú)特的加載動畫，使之與你設(shè)計(jì)的應(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)載。