起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識動效設置基礎：緩動
筆者分享了關于緩動設計的相關知識，一起來看看~
先放結論：進入屏幕用減速（ease-out）；離開屏幕用加速（ease-in）；屏幕內部移動先加后減（ease-in-out）！
緩動的最大用處就是應用在設計的運動表現上，可以結合物理、數學等原理真實地模擬顯示生活中的運動現象，更加符合自然規律及人類認知，并使對象按照用戶期望的行為交互，提供連續性體驗。
在適當緩動的情景下，用戶可能會忽視運動本身，專注于頁面的內容，從一定程度上保證用戶不為因為運動而分散注意力，或調動大腦內的認知資源。
一、前端知識
1. CSS中不同的動畫區別
- linear：規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）
- Ease-in：規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）
- Ease-out：規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）
- Ease-in-out：規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
- cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值?？赡艿闹凳?0 至 1 之間的數值。
2. 相關屬性（括號內為定義該內容的相關角色）
- 移動方向：向左向右等。（UX）
- 移動距離：以像素為單位。（UI）
- 移動時長：一個緩動執行的時間。（UX）
- 移動方式：緩動類型。（UX）
- 啟動延時：緩動啟動的延時時長，若設為1秒，即1秒后緩動才啟動。（UX）
- 自動播放：緩動是否自動播放。（UX）
二、緩動詳解
主要看以下四個：勻速運動（linear，主要用于對比）、緩動-減速運動（ease-out）、緩動-加速運動（ease-in）、緩動-先加速后減速（ease-in-out）。
1. 勻速運動（linear）
比較少的情況下，會用勻速運動，會顯得比較僵硬。不符合物理世界的規律，真實的運動狀態下，物體的速度是會隨著運動狀態發生變化的。下圖為勻速運動（linear）時運動距離隨時間的變化曲線：
2. 緩動-減速運動（ease-out）
相比于勻速，開始的時候快，結束的時候慢。下圖為緩動-減速運動（ease-out）時運動距離隨時間的變化曲線：
3. 緩動-加速運動（ease-in）
相比于勻速，開始的時候慢，結束的時候快。下圖為緩動-加速運動（ease-in）時運動距離隨時間的變化曲線：
在界面設計中，減速和加速動效往往是成對使用的。通常元素進入頁面時時用減速運動（ease-out），推出頁面時用加速運動（ease-in）。
新元素進入屏幕的時候，用戶是希望其能快速進入，所以一開始的速度是快的。當新的元素快要到達的時候，用戶的關注點是新元素的形態，這時候，需要減速到達，讓用戶感受到形態的變化。所以進入頁面是減速運動（ease-out）。
用戶點擊當某元素退出當前頁，更加關注的是當前頁面給的反饋，所以該元素的初始速度不宜很快，否則用戶感受不到是他的操作引起的變化，還是頁面自己跳轉的。所以離開頁面是加速運動（ease-in）。
例如iPhone App Store進入頁面用減速：
4. 緩動-先加速后減速（ease-in-out）
很多起點和終點都在界面內的運動都使用這種先加速后減速的緩動。
下圖為緩動-先加速后減速（ease-in-out）時運動距離隨時間的變化曲線：
小結
進入屏幕用減速；離開屏幕用加速；屏幕內部移動先加后減。
本文由 @張大俠 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
