筆者分享了關(guān)于緩動(dòng)設(shè)計(jì)的相關(guān)知識(shí)，一起來(lái)看看~

先放結(jié)論：進(jìn)入屏幕用減速（ease-out）；離開(kāi)屏幕用加速（ease-in）；屏幕內(nèi)部移動(dòng)先加后減（ease-in-out）！

緩動(dòng)的最大用處就是應(yīng)用在設(shè)計(jì)的運(yùn)動(dòng)表現(xiàn)上，可以結(jié)合物理、數(shù)學(xué)等原理真實(shí)地模擬顯示生活中的運(yùn)動(dòng)現(xiàn)象，更加符合自然規(guī)律及人類認(rèn)知，并使對(duì)象按照用戶期望的行為交互，提供連續(xù)性體驗(yàn)。

在適當(dāng)緩動(dòng)的情景下，用戶可能會(huì)忽視運(yùn)動(dòng)本身，專注于頁(yè)面的內(nèi)容，從一定程度上保證用戶不為因?yàn)檫\(yùn)動(dòng)而分散注意力，或調(diào)動(dòng)大腦內(nèi)的認(rèn)知資源。

一、前端知識(shí)

1. CSS中不同的動(dòng)畫區(qū)別

• linear：規(guī)定以相同速度開(kāi)始至結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,1,1)）
• Ease-in：規(guī)定以慢速開(kāi)始的過(guò)渡效果（等于 cubic-bezier(0.42,0,1,1)）
• Ease-out：規(guī)定以慢速結(jié)束的過(guò)渡效果（等于 cubic-bezier(0,0,0.58,1)）
• Ease-in-out：規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
• cubic-bezier(n,n,n,n)：在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

2. 相關(guān)屬性（括號(hào)內(nèi)為定義該內(nèi)容的相關(guān)角色）

• 移動(dòng)方向：向左向右等。（UX）
• 移動(dòng)距離：以像素為單位。（UI）
• 移動(dòng)時(shí)長(zhǎng)：一個(gè)緩動(dòng)執(zhí)行的時(shí)間。（UX）
• 移動(dòng)方式：緩動(dòng)類型。（UX）
• 啟動(dòng)延時(shí)：緩動(dòng)啟動(dòng)的延時(shí)時(shí)長(zhǎng)，若設(shè)為1秒，即1秒后緩動(dòng)才啟動(dòng)。（UX）
• 自動(dòng)播放：緩動(dòng)是否自動(dòng)播放。（UX）

二、緩動(dòng)詳解

主要看以下四個(gè)：勻速運(yùn)動(dòng)（linear，主要用于對(duì)比）、緩動(dòng)-減速運(yùn)動(dòng)（ease-out）、緩動(dòng)-加速運(yùn)動(dòng)（ease-in）、緩動(dòng)-先加速后減速（ease-in-out）。

1. 勻速運(yùn)動(dòng)（linear）

比較少的情況下，會(huì)用勻速運(yùn)動(dòng)，會(huì)顯得比較僵硬。不符合物理世界的規(guī)律，真實(shí)的運(yùn)動(dòng)狀態(tài)下，物體的速度是會(huì)隨著運(yùn)動(dòng)狀態(tài)發(fā)生變化的。下圖為勻速運(yùn)動(dòng)（linear）時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線：

2. 緩動(dòng)-減速運(yùn)動(dòng)（ease-out）

相比于勻速，開(kāi)始的時(shí)候快，結(jié)束的時(shí)候慢。下圖為緩動(dòng)-減速運(yùn)動(dòng)（ease-out）時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線：

3. 緩動(dòng)-加速運(yùn)動(dòng)（ease-in）

相比于勻速，開(kāi)始的時(shí)候慢，結(jié)束的時(shí)候快。下圖為緩動(dòng)-加速運(yùn)動(dòng)（ease-in）時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線：

在界面設(shè)計(jì)中，減速和加速動(dòng)效往往是成對(duì)使用的。通常元素進(jìn)入頁(yè)面時(shí)時(shí)用減速運(yùn)動(dòng)（ease-out），推出頁(yè)面時(shí)用加速運(yùn)動(dòng)（ease-in）。

新元素進(jìn)入屏幕的時(shí)候，用戶是希望其能快速進(jìn)入，所以一開(kāi)始的速度是快的。當(dāng)新的元素快要到達(dá)的時(shí)候，用戶的關(guān)注點(diǎn)是新元素的形態(tài)，這時(shí)候，需要減速到達(dá)，讓用戶感受到形態(tài)的變化。所以進(jìn)入頁(yè)面是減速運(yùn)動(dòng)（ease-out）。

用戶點(diǎn)擊當(dāng)某元素退出當(dāng)前頁(yè)，更加關(guān)注的是當(dāng)前頁(yè)面給的反饋，所以該元素的初始速度不宜很快，否則用戶感受不到是他的操作引起的變化，還是頁(yè)面自己跳轉(zhuǎn)的。所以離開(kāi)頁(yè)面是加速運(yùn)動(dòng)（ease-in）。

例如iPhone App Store進(jìn)入頁(yè)面用減速：

4. 緩動(dòng)-先加速后減速（ease-in-out）

很多起點(diǎn)和終點(diǎn)都在界面內(nèi)的運(yùn)動(dòng)都使用這種先加速后減速的緩動(dòng)。

下圖為緩動(dòng)-先加速后減速（ease-in-out）時(shí)運(yùn)動(dòng)距離隨時(shí)間的變化曲線：

小結(jié)

進(jìn)入屏幕用減速；離開(kāi)屏幕用加速；屏幕內(nèi)部移動(dòng)先加后減。

本文由 @張大俠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。