這是一個簡單的動畫改變了游戲-拉動刷新，一個絕對的創新時間。難怪Twitter毫不猶豫地收購了Tweetie并雇傭了lorenbrichter。明智的選擇！隨著時間的推移，越來越多的開發人員將這種方式融入到他們的應用程序中，最后，蘋果公司自己也為其系統應用程序郵件帶來了“拉動刷新”（pull-to-refresh）功能，讓那些重視可用性的人感到高興。

我們將要創建的刷新手勢。（查看大版本）今天，大多數客戶希望在他們的應用程序中看到這種姿態，大多數設計師希望創建一個集成了拉-刷新動畫的原型，最好是自定義的。本教程解釋了如何在Flinto中構建一個原型，Flinto是一個使滑動手勢動畫成為可能的工具，而且很明顯，如果沒有pull，你就不能創建一個pull-to-refresh動畫。不過，公平地說，Flinto并不是唯一一個給我們刷卡手勢的工具——Facebook折紙和POP值得一提。在我們創建了一個原型之后，我們將把它編碼到我們的Android設計中申請。這個本教程將幫助您掌握Flinto，理解創建此類原型的邏輯，并學習在應用程序中編寫這些原型的過程。按照這些步驟，你需要macOS，Sketch for Mac，Flinto for Mac來創建原型，Android Studio和jdk7 編寫代碼。進一步閱讀SmashingMag：應用內手勢和移動應用程序用戶體驗功能動畫如何幫助改進UX拇指區：為移動用戶設計在Flinto的PhotoshopPrototype中制作高級動畫對于原型，我使用的是聊天板的屏幕，一個由Erminesoft開發的Android聊天應用程序。用戶聊天室的列表將是一個完美的地方來集成刷新動畫來檢查新消息。我們開始吧！第1步我們將把所有的設計都畫成草圖。第一步，我們需要創建一個屏幕，其中包含用戶可以刷新的任何項目列表?，F在我們需要將屏幕導出到Flinto。我們有兩個選擇此處：導出為分離PNG文件。使用插件發送到弗林托。邁步2Let將改用Flinto for Mac，你可以花99美元購買，也可以在網站上下載免費試用版。為了簡單地刷新動畫，我們需要五個屏幕。此時，我們可以添加一個自定義圖像或使用標準的Flinto形式（矩形或圓形）來創建動畫元素。對于這個項目，我使用了三個標準圓。停在那里：不要搜索圓形。使用矩形®；，將其做成正方形，然后設置最大拐角半徑。給你-你有一個圓圈！步驟3第一個動畫幀需要一個單獨的層和內容列表。在它后面，我們將把動畫元素放在起始位置；在我們的例子中，將有三個圓放置在相同的X和Y坐標上。這是屏幕1。

在屏幕2上，我們需要將內容沿Y軸向下移動，顯示隱藏在內容列表后面的動畫元素。

（查看大版本）此外，在此步驟（以及所有后續步驟）中，應打開轉換計時器（“計時器鏈接”）并將其設置為0毫秒，以消除過渡中的任何延遲到下一個動畫屏幕。只需單擊一個藝術板標題，就可以看到計時器轉換設置