藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：http://www.aliued.cn/2014/12/16/%e5%8a%a8%e6%95%88%e8%ae%be%e8%ae%a1%e7%9a%84%e7%89%a9%e7%90%86%e6%b3%95%e5%88%99.html

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

動(dòng)效作為當(dāng)今提升網(wǎng)頁(yè)感官效果的利器，在各種類(lèi)型的網(wǎng)頁(yè)中已經(jīng)全面開(kāi)花，如何做到自然流暢讓用戶(hù)感覺(jué)舒適的動(dòng)畫(huà)效果呢？今天就來(lái)跟大家聊一聊動(dòng)效設(shè)計(jì)的物理法則，以及它是如何應(yīng)用的。

首先來(lái)一發(fā)大師金句，迪士尼動(dòng)畫(huà)大師格里穆·乃特維克曾經(jīng)說(shuō)過(guò)：

動(dòng)畫(huà)制作和動(dòng)效設(shè)計(jì)是本質(zhì)相通的，我們需要為用戶(hù)建立一種“視覺(jué)的真實(shí)”，即動(dòng)作是可信的，我們需要獲得的不是照搬線(xiàn)下場(chǎng)景的寫(xiě)實(shí)主義，而是“可信度”，要讓用戶(hù)感知到這個(gè)動(dòng)作是成立的。這里，就要搬出高大上的物理學(xué)了！

物理學(xué)四大基本力——萬(wàn)有引力、電磁相互作用力、弱相互作用力、強(qiáng)相互作用力，我們?cè)诂F(xiàn)實(shí)生活中能夠感知到的基本上都源自萬(wàn)有引力（其他三種力咱也分析不出來(lái)啥）。換句話(huà)說(shuō)，用戶(hù)在現(xiàn)實(shí)生活中建立的動(dòng)作經(jīng)驗(yàn)，皆源于物體的“重量感”。要分析萬(wàn)有引力，就得翻出牛頓大大的課本章節(jié)了。

（一）牛頓第一定律

根據(jù)牛頓第一定律——慣性定律，任何物體都要保持勻速直線(xiàn)運(yùn)動(dòng)或靜止?fàn)顟B(tài)，直到外力迫使它改變運(yùn)動(dòng)狀態(tài)為止，說(shuō)白了，就是不考慮任何力的作用的物體運(yùn)動(dòng)，其速度大小和方向是沒(méi)有任何變化的，用公式表示：

通過(guò)以上公式我們可以繪制出勻速直線(xiàn)運(yùn)動(dòng)的位移-時(shí)間曲線(xiàn)：

應(yīng)用到網(wǎng)頁(yè)設(shè)計(jì)中，為了實(shí)現(xiàn)過(guò)渡效果，我們必須模擬出頁(yè)面區(qū)塊的位移-時(shí)間曲線(xiàn)，對(duì)于運(yùn)動(dòng)拆解分析得到的分段曲線(xiàn)，可以運(yùn)用計(jì)算機(jī)圖形圖像造型的基本工具——貝塞爾曲線(xiàn)繪制出來(lái)，調(diào)用CSS3 animation-timing-function 屬性中的貝塞爾曲線(xiàn)繪制函數(shù)cubic-bezier可以輕松的用程序模擬運(yùn)動(dòng)軌跡。 例如上圖所示的貝塞爾曲線(xiàn)可以用四個(gè)點(diǎn)來(lái)定義，其中P0、P3是固定的點(diǎn)，它們的坐標(biāo)值是默認(rèn)的[0,0],[1,1]。P1、P2兩點(diǎn)則用來(lái)控制曲線(xiàn)的形狀和曲率，PS中的鋼筆工具的錨點(diǎn)具有相同功能，這兩個(gè)控制點(diǎn)的坐標(biāo)值是需要我們通過(guò)cubic-bezier(x1, y1, x2, y2)自定義的，范圍在[0, 1]。 對(duì)于勻速直線(xiàn)運(yùn)動(dòng)，將運(yùn)動(dòng)時(shí)間設(shè)置為1s，通過(guò)cubic-bezier模擬運(yùn)動(dòng)如下：

linear 動(dòng)畫(huà)從頭到尾的速度是相同的。應(yīng)用到網(wǎng)頁(yè)的banner區(qū)域切換動(dòng)效中的效果（動(dòng)圖需加載）：

感覺(jué)不是很自然，由于空氣阻力的存在，程序模擬的勻速直線(xiàn)運(yùn)動(dòng)在現(xiàn)實(shí)生活中是很難實(shí)現(xiàn)的，因此對(duì)于這樣一個(gè)用戶(hù)平時(shí)很少感知到的運(yùn)動(dòng)是很難建立信任感的。這樣的勻速直線(xiàn)運(yùn)動(dòng)也是我們?cè)谶M(jìn)行動(dòng)效設(shè)計(jì)時(shí)需要極力避免的?？紤]到需要分析物體運(yùn)動(dòng)的受力情況，我們借助牛頓第二定律來(lái)拆解運(yùn)動(dòng)。

（二）牛頓第二定律

根據(jù)牛頓第二定律——物體加速度的大小跟作用力成正比，跟物體的質(zhì)量成反比，加速度的方向跟作用力的方向相同。當(dāng)物體持續(xù)受到一個(gè)不變的力的作用時(shí)，它將做勻加速直線(xiàn)運(yùn)動(dòng)，用公式表示：

繪制出勻加速直線(xiàn)運(yùn)動(dòng)的位移-時(shí)間曲線(xiàn)：

通過(guò)cubic-bezier模擬運(yùn)動(dòng)如下：

ease-in 動(dòng)畫(huà)從低速開(kāi)始，逐漸加速，收尾態(tài)速度最快。應(yīng)用效果：

開(kāi)始狀態(tài)符合靜止物體開(kāi)始運(yùn)動(dòng)的物理規(guī)律，但是收尾態(tài)不太符合，物體在結(jié)束運(yùn)動(dòng)之前速度是整個(gè)運(yùn)動(dòng)過(guò)程中最快的，這是不合邏輯的。 如果我們讓收尾狀態(tài)符合物理法則，那么就是需要讓物體減速下來(lái)，勻減速運(yùn)動(dòng)的公式如下：

繪制出勻加速直線(xiàn)運(yùn)動(dòng)的位移-時(shí)間曲線(xiàn)：

通過(guò)cubic-bezier模擬運(yùn)動(dòng)如下：

ease-out 動(dòng)畫(huà)從高速開(kāi)始，以低速結(jié)束。應(yīng)用效果：

模擬的是物體收到一個(gè)持續(xù)時(shí)間很短的推力作用后自然滑行并慢慢停止的過(guò)程。在本應(yīng)用場(chǎng)景使用這種效果是比較合適的，banner圖片剛開(kāi)始切換運(yùn)動(dòng)時(shí)，需要用一個(gè)比較快的速度來(lái)吸引用戶(hù)的注意力“嗨！這兒有新的信息！”，在快要抵達(dá)最終位置的時(shí)候，需要逐漸慢下來(lái)，因?yàn)榇藭r(shí)用戶(hù)已經(jīng)將注意力轉(zhuǎn)移到新的banner圖上了，用戶(hù)需要的是這一區(qū)塊逐漸慢下來(lái)好看清楚上面的內(nèi)容，獲取信息。

如果想要讓banner圖片在起始階段也是柔和地出現(xiàn)，可以緩入緩出一起使用，位移-時(shí)間曲線(xiàn)：

通過(guò)cubic-bezier模擬運(yùn)動(dòng)如下：

ease-in-out 動(dòng)畫(huà)從低速開(kāi)始，以低速結(jié)束。應(yīng)用效果：

切換效果非常的柔和，也就是我們常說(shuō)的“緩入緩出”。

（三）賦予材質(zhì)——速度、形變和反饋

好的動(dòng)效在滿(mǎn)足了基本的物理原則之后還有很多“材質(zhì)”上的細(xì)節(jié)補(bǔ)充，主要有速度、形變和反饋這三個(gè)方面。 如果我們想要給上面的案例加上一點(diǎn)重量感，也就是讓物體看上去“有質(zhì)量”，可以再速度上做一點(diǎn)文章，調(diào)節(jié)一下運(yùn)動(dòng)曲線(xiàn)；

通過(guò)cubic-bezier模擬運(yùn)動(dòng)：

ease動(dòng)畫(huà)從低速開(kāi)始，動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。應(yīng)用效果：

我們可以用這種開(kāi)始態(tài)和結(jié)束態(tài)絕對(duì)值不等的加速度讓運(yùn)動(dòng)產(chǎn)生“粘滯感”，可以讓運(yùn)動(dòng)的區(qū)塊產(chǎn)生更加真實(shí)的互動(dòng)效果。但是另一方面，不對(duì)等的加速和減速過(guò)程有可能會(huì)讓動(dòng)效產(chǎn)生拖泥帶水、不干脆的感覺(jué)，具體應(yīng)用還是要具體情況具體分析。

做到對(duì)物體運(yùn)動(dòng)過(guò)程的拆解分析再程序模擬之后，我們還可以對(duì)運(yùn)動(dòng)物體的形狀上花一些小心思，通過(guò)物體形變和運(yùn)動(dòng)的反饋效果可以為物體賦予“材質(zhì)”，來(lái)看幾個(gè)不錯(cuò)的Web動(dòng)效案例。

采用ease-out的參數(shù)設(shè)置，使得所有元素迅速進(jìn)入用戶(hù)視線(xiàn)，又緩慢到達(dá)目標(biāo)位置，動(dòng)畫(huà)流暢自然。

通過(guò)不同區(qū)塊速度差來(lái)實(shí)現(xiàn)拉伸頁(yè)面的效果，但是仔細(xì)看每一個(gè)區(qū)塊的運(yùn)動(dòng)，發(fā)現(xiàn)實(shí)際上是沒(méi)有形變的，巧妙的速度變化也可以讓整個(gè)頁(yè)面的切換變得生動(dòng)起來(lái)。

通過(guò)形變的設(shè)置，使得不同高度的柱狀圖形變會(huì)顯得很有彈性，仔細(xì)看該網(wǎng)頁(yè)表現(xiàn)的都是“Top”的數(shù)據(jù)，為柱狀圖賦予彈性效果也是非常符合其所表現(xiàn)的數(shù)據(jù)“情緒”的，整個(gè)頁(yè)面都會(huì)顯得趣味生動(dòng)。

通過(guò)下拉框的反彈效果現(xiàn)實(shí)區(qū)塊的“窗簾”設(shè)計(jì)，運(yùn)動(dòng)反饋也可以為網(wǎng)頁(yè)元素賦予材質(zhì)。

本文主要分析的案例集中在網(wǎng)頁(yè)動(dòng)效當(dāng)中運(yùn)用最廣泛的線(xiàn)性運(yùn)動(dòng)，對(duì)于基本動(dòng)效的其他動(dòng)作，如縮放、旋轉(zhuǎn)、不透明度等等效果的變化，其本質(zhì)上是相通的，結(jié)合物理法則的分析實(shí)踐均可以做出自然流暢的效果， 總結(jié)一下應(yīng)用流程： 1. 分析具體內(nèi)容區(qū)塊的運(yùn)動(dòng)，結(jié)合需求本身繪制出區(qū)塊運(yùn)動(dòng)的運(yùn)動(dòng)數(shù)值-運(yùn)動(dòng)時(shí)間曲線(xiàn)。 2. 拆解曲線(xiàn)，運(yùn)用貝塞爾曲線(xiàn)模擬運(yùn)動(dòng)。 3. 通過(guò)速度調(diào)整、材質(zhì)形狀變化和運(yùn)動(dòng)反饋來(lái)為區(qū)塊賦予動(dòng)效豐富的細(xì)節(jié)。