使用原理和草圖的 UI 動畫分步指南

已發表: 2022-03-11

設計一個考慮到動畫和過渡的 UI 界面是為您的下一個應用程序規劃更好的用戶體驗 (UX) 的好方法。在註意力短暫的世界中，動畫微交互是激髮用戶參與度的完美方式。這就是 Airbnb 最近推出 Lottie 的原因——它的“新的開源工具，可以輕鬆地將動畫添加到原生應用程序中”。

像 Lottie 這樣的項目表明，添加動作作為一種新元素來為應用程序和網站打造增強的用戶體驗越來越重要。

在本教程中，您將學習使用 Principle for Mac 的有效 UI 動畫技術。閱讀完本指南後，您將能夠將枯燥和靜態的模型變成交互式原型，以更好地展示您的作品。你可以應用你在這裡學到的東西來改進你的下一個 UI 音高和 Dribbble 投籃。

讓我們開始吧。

下載這些免費資源以跟隨。

您只需要 Principle 和 Sketch 應用程序即可跟隨。如果您還沒有它們，您可以使用下面的鏈接下載免費試用版。

在此處下載免費的 Principle 試用版。
在此處下載免費的 Sketch 試用版。
在此處下載免費的教程源文件。

原理接口概述

如果您習慣了 Mac OS，那麼 Principle 的界面看起來會非常熟悉。它包含三個主要部分：側邊欄、顯示畫板的設計區域以及可以調整大小和移動的預覽窗口。

原則上理解基本動畫概念

使用 Principle 製作動畫相對簡單。您無需具備動畫背景即可開始使用。事實上，大部分繁重的工作都是由 Principle 自動完成的，您只需要關注動畫的開始內容（即按鈕、鏈接、滾動事件）、動畫如何開始以及如何結束。

為了幫助您更好地跟進，這裡有一個簡短的術語詞典，您將在整個指南中看到。

組件：組件是一種有助於包含元素甚至動畫的分組。它相當於 Photoshop 中的“智能對象”或 Illustrator 中的“符號”。
觸發器：一種啟動動畫的方式 - 即通過點擊、滾動、懸停等。原則上，可以通過選擇 Principle 內的任何元素並單擊出現在其右側的帶有閃電圖標的圖標來定義觸發器。
過渡：從一個畫板到另一個畫板的狀態變化，即向左或向右滑動。
緩動效果：過渡的平滑程度取決於動畫的開始和結束方式。

A. 觸發和過渡

使用 Principle 製作動畫的第一步是在元素（即按鈕或鏈接）上設置觸發器（啟動動畫的行為或動作），並更改其初始和/或最終狀態（即其位置或比例）從動畫的開始到結束）。

定義一個初始狀態：你的 UI 元素在動畫開始之前的樣子。
定義觸發器：通過選擇交互元素以及激活動畫的動作。
定義最終狀態：動畫結束時元素的顯示方式。

設置好動畫後，您可以在預覽窗口中進行預覽。

B. 動畫長度和緩動效果

默認情況下，Principle 創建半秒動畫。有時這還不足以詳細查看過渡效果。您可以按照以下三個步驟從動畫面板更改持續時間和“緩動”效果。

打開動畫面板：選擇兩個畫板之間的黑色箭頭，然後單擊頂部欄上的“動畫”按鈕。
延長動畫長度：移動藍線的端點。
應用緩動：選擇所有菱形點，然後從下拉列表中選擇“同時緩動”以平滑過渡。

你會得到什麼

該視頻向您展示了完成本教程後您將能夠創建的內容。該演示應用展示了 Google 的 Material Design 調色板，並在您選擇顏色後為您提供更多詳細信息。您將創建一個加載動畫、一些具有平滑視差效果的頁面過渡和一個菜單滑塊。

確保您確實在此處下載了免費的教程源文件。

讓我們開始吧。

從草圖文件到原理

移動畫板以準備它們之間的自然過渡：例如，從右側滑動的屏幕應該在動畫上觸摸它正在替換的屏幕的右邊緣。
設置好 Sketch 文件後，跳轉到 Principle，創建一個匹配 360x640 比例的空白文檔，然後單擊“導入”按鈕。

刪除屏幕標題以實現無縫滾動

要在頁面之間創建無縫過渡，您可以刪除除第一個之外的每個標題。最初添加標題只是為了展示應用程序的外觀。您只會在“歡迎”屏幕上保留標題，它將作為菜單和應用程序標題的粘性欄。

創建加載動畫 - 形狀

選擇加載形狀組，然後單擊包含加載形狀和文本的“創建組件”。為第一個符號中的文本創建一個組件；我們將在之後單獨為文本設置動畫。
選擇分組的形狀。選擇“點擊”觸發器，然後拖放到同一畫板的頂部以創建副本。
第二個畫板代表動畫的最終狀態，您可以使用角度屬性旋轉組。為“填充”和“輪廓”賦予不同的角度值，以創建更有趣的效果。
最後，選擇畫板之間的箭頭，單擊“動畫”以打開“動畫面板”，然後通過將端點滑動到大約 1.00 秒來更改持續時間。

創建加載動畫 - 文本

首先，創建上滑動畫。選擇按鈕形狀，並應用“Tap”觸發事件。在新畫板中，將所有屏幕向上移動 640 像素（等於當前畫板高度）。
現在，讓我們創建視差。轉到上一個畫板，在歡迎屏幕上，以不同的 Y 值向下移動幾何形狀和文本。
最後，在動畫面板中，延長時間線，比如 1s。將“Ease Both”效果應用到時間線（確保您已選擇所有菱形點，然後單擊任何藍線以將效果應用到所有點）。
預覽您的動畫並四處移動形狀，直到視差效果看起來不錯。

創建視差效果 - 歡迎頁面

選擇加載組件並通過在畫板中的任意位置拖動箭頭來應用“Tap”觸發器。
選擇所有屏幕（從主組中），並將其向上移動 640 像素。此步驟將顯示歡迎屏幕。
返回上一個畫板，將“歡迎”屏幕上的形狀向下移動。這會創建稱為視差的異步滑動效果。
通過在動畫面板內為過渡添加時間來調整動畫：選擇畫板之間的箭頭，然後將藍線上的端點拖動到大約 1 秒。

創建視差效果 - 關於頁面

選擇向下箭頭按鈕（確保選擇了整個組），然後通過從畫板中的任意位置拖動箭頭來應用“Tap”觸發器。
選擇所有屏幕（從主組中），並將所有內容向上移動 640 像素。此步驟會顯示“關於”屏幕。
返回上一個畫板，將“關於”屏幕上的形狀向下移動。這會創建稱為視差的異步滑動效果。

創建視差效果 - 顏色頁面

將“Tap”觸發器應用到向下箭頭按鈕（確保選擇整個組），這將創建一個新的畫板。
在新的畫板上，選擇所有屏幕並將它們向上移動 640 像素。
在上一個畫板上，向下移動顏色和文本。請注意，您將對象移動得越低，向上滑動所需的時間就越長，因此請確保使用不同的位置來創建更動態的效果。
最後，通過擴展動畫，並在動畫面板內的所有藍色時間線上應用“緩動”。

從側面滑動頁面 - 顏色選擇頁面

將“點擊”觸發器應用於“顏色”屏幕上的“加載更多”按鈕。
在新畫板中，將“顏色”和“選擇”內容向左移動 360 像素（畫板寬度）
返回上一個畫板並將屏幕內容向相反方向移動 - 向右。
請注意，您還可以設置屏幕不透明度從 0% 滑入 100% 的動畫。
使用動畫持續時間和緩動效果來調整過渡效果。

動畫菜單圖標

請注意，任何來自 Sketch 原始文件的效果（如陰影）的圖層和形狀都會作為圖像導入到 Principle。如果您需要在 Principle 中編輯形狀，請盡量在導入之前不要添加任何特殊效果。
話雖如此，使用現有圖標作為指導，繪製三個細矩形，並將它們分組以創建漢堡菜單圖標。現在，您可以刪除或隱藏之前的菜單圖標。
選擇新創建的圖標，並對其應用“點擊”觸發器。
在新的畫板中，旋轉菜單圖標的頂部和底部矩形，確保它們居中對齊，並將中間的不透明度設為零。
要查看您剛剛創建的動畫，請使用“Tap”觸發器將更改的菜單圖標鏈接回預覽畫板，然後對其進行測試。