中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在本教程中，我們將使用Sketch創建基本形狀和原理，以快速創建簡單的自定義加載動畫。（這些都適用于Mac應用程序） 你將學習如何創建Trello，Flickr，Slack等使用的豐富多彩的加載動畫。

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

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

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

在本教程中，我們將使用Sketch創建基本形狀和原理，以快速創建簡單的自定義加載動畫。（這些都適用于Mac應用程序）?你將學習如何創建Trello，Flickr，Slack等使用的豐富多彩的加載動畫。

Let’s get to?it!

1、松弛加載動畫

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

放置四個形狀，以創建一個假想的方形，每側之間的距離為150px。應用四種不同的顏色（＃35BA90綠色，＃69CADD藍色，＃EBA900黃色和＃E20661粉色）。

將形狀導入原理，對它們進行分組，然后單擊“創建組件”以嵌套組。

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

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

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

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

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

相關鏈接：https://www.youtube.com/watch?v=Qi64vUqJKAw

2、Trello加載動畫

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

將畫板導入原理并應用“自動”觸發來創建一個新的關鍵幀。在新的藝術板上，反轉白色矩形的高度（使左矩形高70px，正方形140px）。在“動畫”面板中應用“輕松雙向”效果，以順利過渡。

相關鏈接：https://www.youtube.com/watch?v=0PHiYXKPm9Y

3、滾動圈

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

打開一個新的原則文件，并使用“導入”按鈕從Sketch傳送圓。在一行中應用兩個“自動”觸發器。

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

最后，將第三個畫板與另一個“自動”觸發器連接起來。應用“線性”轉換到畫板1和2之間的時間軸。檢查你在預覽窗口中剛創建的動畫。

相關鏈接：https://www.youtube.com/watch?v=kDmmWvz5e3I

4、Flickr加載動畫

并排跟蹤一個藍色圓圈和一個粉紅色的圓圈。將它們導入原理并應用“自動”觸發來創建一個新的畫板。

反轉圓圈的位置并應用新的“自動”觸發來創建第三個畫板。在新的畫板上，反轉左面板上圓圈層的順序。

應用第三個“自動”觸發器創建第四個畫板。在最后一個畫板上，再次反轉圓圈的位置，并將最后一個“自動”觸發器從最后一個畫板應用到初始畫面。

相關鏈接：https://www.youtube.com/watch?v=7azaIHTykCI

5、加載類型

在“原則”上創建一個新項目，并使用“文本”工具寫入“LOADING”。將文本對準左側，并將其垂直居中在畫板中。

連續五次施加“自動”觸發。將第五個觸發器從最后一個畫板循環回到初始畫板。

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

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

現在，你可以預覽剛創建的動畫。

相關鏈接：https://www.youtube.com/watch?v=ct7zSm2TadM

6、脈沖點

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

連續四次應用“自動”觸發。

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

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

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

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

相關鏈接：https://www.youtube.com/watch?v=_6HTgJAvyrM

7、滾動點

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

在畫板上應用“自動”觸發。

在新的畫板上，旋轉一組點360度。

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

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

8、脈動圈

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

連續三次施加“自動”觸發。

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

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

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

對最后一張畫板應用“自動”觸發。將內圈縮小到10px，不透明度為50％。

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

相關鏈接：https://www.youtube.com/watch?v=ESSAfQ7FLN8

9、跳點

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

應用“自動”觸發。在第二幅畫板上，將第一個圓圈移動50px。

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

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

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

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

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

相關鏈接：https://www.youtube.com/watch?v=bIYMHXsmSIM

10、經典的加載機

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

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

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

轉到原則，并使用“導入”按鈕導入Sketch圖稿。

對第一幅畫板應用“自動”觸發，并旋轉藍色圓圈360度。

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

相關鏈接：https://www.youtube.com/watch?v=UHAQ1ftzIaU

結論

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

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

原文作者：Tidjane?Tall

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

譯者：SKYUI

本文由 @SKYUI 翻譯發布于人人都是產品經理。未經許可，禁止轉載。