最近，我們對 Sketch 中的原型設計進行了一些重大改進，並且我們也仔細聆聽了您的意見回饋 — 包括動畫方面的需求。在我們的最新更新中，我們推出了智慧型動畫 — 讓您的想法動起來最簡單的方式。
我們認為，与其提供您智慧型動畫的逐步指南，不如分享一些實際應用範例，說明它如何為您所用。每個範例都包含一個 Sketch 文件，您可以下載或複製到您的工作區，以便了解我們是如何讓它運作的。
但在深入探討這些範例之前，讓我們先了解一下基本知識。
什麼是智慧型動畫？
智慧型動畫會在多個畫板上尋找名稱相同的圖層，並在您在畫板之間切換時為它們的變化製作動畫。如果您曾經在 Keynote 中使用過神奇移動，您會感到非常熟悉！
在此範例中，我們在兩個畫板中都有一個名稱相同的橢圓形 — 唯一的區別是它的大小。如果我們使用智慧型動畫建立轉場，橢圓形的大小會平滑且漸進地增長。
要設定智慧型動畫，請確保要在多個畫板上製作動畫的任何圖層都具有相同的名稱。當您從一個圖層或畫板連結到另一個圖層或畫板時，請在檢查器中的「原型」標籤下選擇「智慧型動畫」作為動畫類型。您還可以設定持續時間和緩動類型來自訂移動方式。
我們對於原型設計的目標始終是保持簡單和快速。但動畫本身就可能是一個獨立的應用程式（實際上，市面上已經有很多不錯的動畫應用程式）。透過智慧型動畫，我們在提供您更多選項和協助您快速迭代想法之間取得了平衡。
了解基本知識後，讓我們看看在原型中使用智慧型動畫的不同方法。
使用智慧型動畫指示進度
從旋轉器到骨架圖，有很多方法可以使用動畫來呈現進度感。在此範例中，我們使用類似 Touch ID 的指紋圖示，讓使用者在登入銀行應用程式時了解他們的生物辨識資料正在被檢查。
在此範例中，我們可以改變指紋不同部分「填滿」的速度，因為每個區段的長度不同，而整體時間保持不變。
要達到這個效果，我們需要善用遮罩，以及群組和個別圓形的旋轉來填滿大部分的區塊。如果您想確切了解它是如何完成的，絕對值得探索一下範例文件。您還可以了解我們是如何實現擴散的光暈效果——這是圖層大小、邊框透明度和圖層透明度的巧妙組合。
使用 Smart Animate 漸進式顯示資訊
當您的設計中包含大量資訊時，一開始先隱藏部分資訊，僅在使用者主動選擇查看更多內容時才顯示出來，這是一個合理的方法。在這個音樂播放器中，我們加入了更多關於專輯的細節（曲目列表、類型等），這些細節在資料庫視圖中並非必要顯示。
在這裡，我們使用圖層位置和透明度來控制不同元素動畫顯示的方向。我們還添加了一個關閉圖示，它使用「前一張畫板」目標以反向播放動畫序列並關閉模態視窗。
查看範例文件，可以更清楚地了解這個範例是如何運作的——尤其是我們如何使用圖層位置來控制每個元素的移動。
使用 Smart Animate 增添細膩度
這個例子比較難解釋！有時，作品中的「細膩感」可能取決於微小細節的完美呈現。在此範例中，我們為黑膠唱片播放器應用程式製作了一系列的 onboarding 畫面。當您瀏覽 onboarding 畫面時，插圖會移動和變化以視覺化播放過程。
如果您打開範例文件，您會看到我們在 onboarding 步驟中大量使用圖層位置來移動元素到畫面內外。一個方便的技巧是使用鍵盤上的方向鍵將元素輕推到畫板外，而不是點擊並拖曳。這可以防止它們自動「重新父子化」到不同的畫板或畫布。
最後，為了實現旋轉唱片的效果，我們為黑膠唱片的標籤和顏色圖層設定了一個非常高的旋轉值——這樣它們在最終過渡期間會旋轉多次。
在導覽中使用 Smart Animate
在所有 Smart Animate 的使用案例中，這個案例相當常見。在此範例中，我們重新製作了經典的 macOS 側邊欄，包含可摺疊的項目。如果您一直在關注其他範例，您應該很清楚我們是如何完成大部分工作的，但您可能也注意到我們為側邊欄按鈕提供了一個精緻的懸停狀態。
如同本文中的許多其他範例一樣，透過打開範例文件，您會看到我們在此處使用了圖層位置。同時，也運用了一些人字形圖示的旋轉來顯示側邊欄中的子項目。這一切都相當簡單，但最終結果是我們現在可以在 Sketch 中模仿 macOS 風格的 UI 動畫！
Smart Animate 是一個您可以透過玩樂和實驗來學習的功能，因此我們鼓勵您這樣做。無論您是想添加一些基本的動作，還是想做一些更進階的操作，Smart Animate 都能讓它實現，更重要的是，它很容易上手。
一如既往，我們很想知道您對 Smart Animate 的看法——如果您有任何問題、建議或只是想分享您使用它製作的作品，歡迎到我們的論壇與我們交流。
