今天想分享一下我最近的UI設計練習，關於界面過渡效果的一些有趣應用。這次的練習主題是原型動態效果，雖然自己目前對動效很熟練了，但有一些效果實際上很少被使用，所以借此機會來試試看，也能維持自己的熟練度。
這次的練習主題包括以下幾點：
- 確認按鈕過渡效果： 包括3種不同的變化，從一個狀態到另一個狀態的流暢切換。
- 按鈕狀態： 包括心形按鈕（適用於收藏或按心等狀態）和加載動效。
- 確認加載到完成的過渡效果按鈕。
✏️來記錄一下這次的學習心得：
1. 將動畫過渡視為影片的兩個關鍵點
在這次練習中，我發現許多動效實際上與我在剪輯視頻時所使用的“起點”和“終點”的概念非常相似。你要從哪種狀態變換至怎麼樣的結果。
例如，第一個 “Pay now” 按鈕就是這樣，它的起點是深藍色的背景，所以完成狀態要隱藏，反之亦然，最後再添加過渡效果即可完成簡單而出色的效果。
2. 善用Properties(組建屬性)、After delay(延遲) 來創建組件狀態
這兩種功能在動態設計中都非常有用。Properties大家應該都很熟悉，可以創建不同屬性去做切換；而After delay則可以在動畫中創造出很多有趣的玩法，比如影片中的影片中的“Loading animated status”：為加載中的三個點添加延遲，呈現錯開上下跳動的動畫。
3. 進階者，以上兩點做疊加練習
最後的例子，”Confirmation” 按鈕，就是將上述兩點疊加的結果。通過使用After delay來製作加載轉圈動效，並添加不同狀態的過渡即可實現效果。
4. 來看看結果吧！
或以下連結：https://vimeo.com/manage/videos/860843978
那麼下次見。
- - - - - - - - - - - - - -
我的Behance ｜Medium
- - - - - - - - - - - - - -
感謝你的閱讀及支持，任何問題都歡迎來信交流｜angelscs205@gmail.com