2015-4-17 藍藍設(shè)計的小編
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
動效作為當今提升網(wǎng)頁感官效果的利器,在各種類型的網(wǎng)頁中已經(jīng)全面開花,如何做到自然流暢讓用戶感覺舒適的動畫效果呢?今天就來跟大家聊一聊動效設(shè)計的物理法則,以及它是如何應(yīng)用的。
首先來一發(fā)大師金句,迪士尼動畫大師格里穆·乃特維克曾經(jīng)說過:
動畫制作和動效設(shè)計是本質(zhì)相通的,我們需要為用戶建立一種“視覺的真實”,即動作是可信的,我們需要獲得的不是照搬線下場景的寫實主義,而是“可信度”,要讓用戶感知到這個動作是成立的。這里,就要搬出高大上的物理學了!
物理學四大基本力——萬有引力、電磁相互作用力、弱相互作用力、強相互作用力,我們在現(xiàn)實生活中能夠感知到的基本上都源自萬有引力(其他三種力咱也分析不出來啥)。換句話說,用戶在現(xiàn)實生活中建立的動作經(jīng)驗,皆源于物體的“重量感”。要分析萬有引力,就得翻出牛頓大大的課本章節(jié)了。
(一)牛頓第一定律
根據(jù)牛頓第一定律——慣性定律,任何物體都要保持勻速直線運動或靜止狀態(tài),直到外力迫使它改變運動狀態(tài)為止,說白了,就是不考慮任何力的作用的物體運動,其速度大小和方向是沒有任何變化的,用公式表示:
應(yīng)用到網(wǎng)頁設(shè)計中,為了實現(xiàn)過渡效果,我們必須模擬出頁面區(qū)塊的位移-時間曲線,對于運動拆解分析得到的分段曲線,可以運用計算機圖形圖像造型的基本工具——貝塞爾曲線繪制出來,調(diào)用CSS3 animation-timing-function 屬性中的貝塞爾曲線繪制函數(shù)cubic-bezier可以輕松的用程序模擬運動軌跡。 例如上圖所示的貝塞爾曲線可以用四個點來定義,其中P0、P3是固定的點,它們的坐標值是默認的[0,0],[1,1]。P1、P2兩點則用來控制曲線的形狀和曲率,PS中的鋼筆工具的錨點具有相同功能,這兩個控制點的坐標值是需要我們通過cubic-bezier(x1, y1, x2, y2)自定義的,范圍在[0, 1]。 對于勻速直線運動,將運動時間設(shè)置為1s,通過cubic-bezier模擬運動如下:
linear 動畫從頭到尾的速度是相同的。應(yīng)用到網(wǎng)頁的banner區(qū)域切換動效中的效果(動圖需加載):
感覺不是很自然,由于空氣阻力的存在,程序模擬的勻速直線運動在現(xiàn)實生活中是很難實現(xiàn)的,因此對于這樣一個用戶平時很少感知到的運動是很難建立信任感的。這樣的勻速直線運動也是我們在進行動效設(shè)計時需要極力避免的??紤]到需要分析物體運動的受力情況,我們借助牛頓第二定律來拆解運動。
(二)牛頓第二定律
根據(jù)牛頓第二定律——物體加速度的大小跟作用力成正比,跟物體的質(zhì)量成反比,加速度的方向跟作用力的方向相同。當物體持續(xù)受到一個不變的力的作用時,它將做勻加速直線運動,用公式表示:
ease-in 動畫從低速開始,逐漸加速,收尾態(tài)速度最快。應(yīng)用效果:
開始狀態(tài)符合靜止物體開始運動的物理規(guī)律,但是收尾態(tài)不太符合,物體在結(jié)束運動之前速度是整個運動過程中最快的,這是不合邏輯的。 如果我們讓收尾狀態(tài)符合物理法則,那么就是需要讓物體減速下來,勻減速運動的公式如下:
ease-out 動畫從高速開始,以低速結(jié)束。應(yīng)用效果:
模擬的是物體收到一個持續(xù)時間很短的推力作用后自然滑行并慢慢停止的過程。在本應(yīng)用場景使用這種效果是比較合適的,banner圖片剛開始切換運動時,需要用一個比較快的速度來吸引用戶的注意力“嗨!這兒有新的信息!”,在快要抵達最終位置的時候,需要逐漸慢下來,因為此時用戶已經(jīng)將注意力轉(zhuǎn)移到新的banner圖上了,用戶需要的是這一區(qū)塊逐漸慢下來好看清楚上面的內(nèi)容,獲取信息。
如果想要讓banner圖片在起始階段也是柔和地出現(xiàn),可以緩入緩出一起使用,位移-時間曲線:
ease-in-out 動畫從低速開始,以低速結(jié)束。應(yīng)用效果:
切換效果非常的柔和,也就是我們常說的“緩入緩出”。
(三)賦予材質(zhì)——速度、形變和反饋
好的動效在滿足了基本的物理原則之后還有很多“材質(zhì)”上的細節(jié)補充,主要有速度、形變和反饋這三個方面。 如果我們想要給上面的案例加上一點重量感,也就是讓物體看上去“有質(zhì)量”,可以再速度上做一點文章,調(diào)節(jié)一下運動曲線;
ease動畫從低速開始,動畫以低速開始,然后加快,在結(jié)束前變慢。應(yīng)用效果:
我們可以用這種開始態(tài)和結(jié)束態(tài)絕對值不等的加速度讓運動產(chǎn)生“粘滯感”,可以讓運動的區(qū)塊產(chǎn)生更加真實的互動效果。但是另一方面,不對等的加速和減速過程有可能會讓動效產(chǎn)生拖泥帶水、不干脆的感覺,具體應(yīng)用還是要具體情況具體分析。
做到對物體運動過程的拆解分析再程序模擬之后,我們還可以對運動物體的形狀上花一些小心思,通過物體形變和運動的反饋效果可以為物體賦予“材質(zhì)”,來看幾個不錯的Web動效案例。
采用ease-out的參數(shù)設(shè)置,使得所有元素迅速進入用戶視線,又緩慢到達目標位置,動畫流暢自然。
通過不同區(qū)塊速度差來實現(xiàn)拉伸頁面的效果,但是仔細看每一個區(qū)塊的運動,發(fā)現(xiàn)實際上是沒有形變的,巧妙的速度變化也可以讓整個頁面的切換變得生動起來。
通過形變的設(shè)置,使得不同高度的柱狀圖形變會顯得很有彈性,仔細看該網(wǎng)頁表現(xiàn)的都是“Top”的數(shù)據(jù),為柱狀圖賦予彈性效果也是非常符合其所表現(xiàn)的數(shù)據(jù)“情緒”的,整個頁面都會顯得趣味生動。
通過下拉框的反彈效果現(xiàn)實區(qū)塊的“窗簾”設(shè)計,運動反饋也可以為網(wǎng)頁元素賦予材質(zhì)。
本文主要分析的案例集中在網(wǎng)頁動效當中運用最廣泛的線性運動,對于基本動效的其他動作,如縮放、旋轉(zhuǎn)、不透明度等等效果的變化,其本質(zhì)上是相通的,結(jié)合物理法則的分析實踐均可以做出自然流暢的效果, 總結(jié)一下應(yīng)用流程: 1. 分析具體內(nèi)容區(qū)塊的運動,結(jié)合需求本身繪制出區(qū)塊運動的運動數(shù)值-運動時間曲線。 2. 拆解曲線,運用貝塞爾曲線模擬運動。 3. 通過速度調(diào)整、材質(zhì)形狀變化和運動反饋來為區(qū)塊賦予動效豐富的細節(jié)。
藍藍設(shè)計的小編 http://tweetduck.com