作為前端的設(shè)計(jì)師和工程師，我們用 CSS 去做樣式、定位并創(chuàng)建出好看的網(wǎng)站。我們經(jīng)常用 CSS 去添加頁(yè)面的運(yùn)動(dòng)過(guò)渡效果甚至動(dòng)畫(huà)，但我們經(jīng)常做的東西不會(huì)超過(guò)這些。

動(dòng)效是一個(gè)有助于訪客和消費(fèi)者理解我們?cè)O(shè)計(jì)的強(qiáng)有力工具。這里有些原則能最大限度地應(yīng)用在我們的工作中。

迪士尼經(jīng)過(guò)基礎(chǔ)工作練習(xí)的長(zhǎng)時(shí)間累積，在 1981 年出版的 The Illusion of Life: Disney Animation 一書(shū)中發(fā)表了動(dòng)畫(huà)的十二個(gè)原則 (12 Principles of Animation) 。這些原則描述了動(dòng)畫(huà)能怎樣用于讓觀眾相信自己沉浸在現(xiàn)實(shí)世界中。

在本文中，我會(huì)逐個(gè)介紹這十二個(gè)原則，并討論它們?cè)鯓舆\(yùn)用在網(wǎng)頁(yè)中。你能在 Codepen 找到它們?nèi)�部的開(kāi)源 HTML 和 CSS 代碼 。

擠壓和拉伸 (Squash and stretch)

Squash and stretch

這是物體存在質(zhì)量且運(yùn)動(dòng)時(shí)質(zhì)量保持不變的概念。當(dāng)一個(gè)球在彈跳時(shí)，碰擊到地面會(huì)變扁，恢復(fù)的時(shí)間會(huì)越來(lái)越短。

創(chuàng)建對(duì)象的時(shí)候最有用的方法是參照實(shí)物，比如人、時(shí)鐘和彈性球。

當(dāng)它和網(wǎng)頁(yè)元件一起工作時(shí)可能會(huì)忽略這個(gè)原則。DOM 對(duì)象不一定和實(shí)物相關(guān)，它會(huì)按需要在屏幕上縮放。例如，一個(gè)按鈕會(huì)變大并變成一個(gè)信息框，或者錯(cuò)誤信息會(huì)出現(xiàn)和消失。

盡管如此，擠壓和伸縮效果可以為一個(gè)對(duì)象增加實(shí)物的感覺(jué)。甚至一些形狀上的小變化就可以創(chuàng)造出細(xì)微但搶眼的效果。

Codepen 上的源代碼

預(yù)備動(dòng)作 (Anticipation)

Anticipation

運(yùn)動(dòng)不傾向于突然發(fā)生。在現(xiàn)實(shí)生活中，無(wú)論是一個(gè)球在掉到桌子前就開(kāi)始滾動(dòng)，或是一個(gè)人屈膝準(zhǔn)備起跳，運(yùn)動(dòng)通常有著某種事先的累積。

我們能用它去讓我們的過(guò)渡動(dòng)畫(huà)顯得更逼真。預(yù)備動(dòng)作可以是一個(gè)細(xì)微的反彈，幫人們理解什么對(duì)象將在屏幕中發(fā)生變化并留下痕跡。

例如，懸停在一個(gè)元件上時(shí)可以在它變大前稍微縮小，在初始列表中添加額外的條目來(lái)介紹其它條目的移除方法。

Codepen 上的源代碼

演出布局 (Staging)

Staging

演出布局是確保對(duì)象在場(chǎng)景中得以聚焦，讓場(chǎng)景中的其它對(duì)象和視覺(jué)在主動(dòng)畫(huà)發(fā)生的地方讓位。這意味著要么把主動(dòng)畫(huà)放到突出的位置，要么模糊其它元件來(lái)讓用戶專注于看他們需要看的東西。

在網(wǎng)頁(yè)方面，一種方法是用 model 覆蓋在某些內(nèi)容上。在現(xiàn)有頁(yè)面添加一個(gè)遮罩并把那些主要關(guān)注的內(nèi)容前置展示。

另一種方法是用動(dòng)作。當(dāng)很多對(duì)象在運(yùn)動(dòng)，你很難知道哪些值得關(guān)注。如果其它所有的動(dòng)作停止，只留一個(gè)在運(yùn)動(dòng)，即使動(dòng)得很微弱，這都可以讓對(duì)象更容易被察覺(jué)。

還有一種方法是做一個(gè)晃動(dòng)和閃爍的按鈕來(lái)簡(jiǎn)單地建議用戶比如他們可能要保存文檔。屏幕保持靜態(tài)，所以再細(xì)微的動(dòng)作也會(huì)突顯出來(lái)。

Codepen 上的源代碼

連續(xù)運(yùn)動(dòng)和姿態(tài)對(duì)應(yīng) (Straight-Ahead Action and Pose-to-Pose)

Straight-Ahead Action and Pose-to-Pose

連續(xù)運(yùn)動(dòng)是繪制動(dòng)畫(huà)的每一幀，姿態(tài)對(duì)應(yīng)是通常由一個(gè) assistant 在定義一系列關(guān)鍵幀后填充間隔。

大多數(shù)網(wǎng)頁(yè)動(dòng)畫(huà)用的是姿態(tài)對(duì)應(yīng)：關(guān)鍵幀之間的過(guò)渡可以通過(guò)瀏覽器在每個(gè)關(guān)鍵幀之間的插入盡可能多的幀使動(dòng)畫(huà)流暢。

有一個(gè)例外是定時(shí)功能step。通過(guò)這個(gè)功能，瀏覽器 "steps" 可以把盡可能多的無(wú)序幀串清晰。你可以用這種方式繪制一系列圖片并讓瀏覽器按順序顯示出來(lái)，這開(kāi)創(chuàng)了一種逐幀動(dòng)畫(huà)的風(fēng)格。

Codepen 上的源代碼

跟隨和重疊動(dòng)作 (Follow Through and Overlapping Action)

Follow Through and Overlapping Action

事情并不總在同一時(shí)間發(fā)生。當(dāng)一輛車從急剎到停下，車子會(huì)向前傾、有煙從輪胎冒出來(lái)、車?yán)锏乃緳C(jī)繼續(xù)向前沖。

這些細(xì)節(jié)是跟隨和重疊動(dòng)作的例子。它們?cè)诰W(wǎng)頁(yè)中能被用作幫助強(qiáng)調(diào)什么東西被停止，并不會(huì)被遺忘。例如一個(gè)條目可能在滑動(dòng)時(shí)稍滑微遠(yuǎn)了些，但它自己會(huì)糾正到正確位置。

要?jiǎng)?chuàng)造一個(gè)重疊動(dòng)作的感覺(jué)，我們可以讓元件以稍微不同的速度移動(dòng)到每處。這是一種在 iOS 系統(tǒng)的視窗 (View) 過(guò)渡中被運(yùn)用得很好的方法。一些按鈕和元件以不同速率運(yùn)動(dòng)，整體效果會(huì)比全部東西以相同速率運(yùn)動(dòng)要更逼真，并留出時(shí)間讓訪客去適當(dāng)理解變化。

在網(wǎng)頁(yè)方面，這可能意味著讓過(guò)渡或動(dòng)畫(huà)的效果以不同速度來(lái)運(yùn)行。

Codepen 上的源代碼

緩入緩出 (Slow In and Slow Out)

Slow In and Slow Out

對(duì)象很少?gòu)撵o止?fàn)顟B(tài)一下子加速到最大速度，它們往往是逐步加速并在停止前變慢。沒(méi)有加速和減速，動(dòng)畫(huà)感覺(jué)就像機(jī)器人。

在 CSS 方面，緩入緩出很容易被理解，在一個(gè)動(dòng)畫(huà)過(guò)程中計(jì)時(shí)功能是一種描述變化速率的方式。

使用計(jì)時(shí)功能，動(dòng)畫(huà)可以由慢加速 (ease-in)、由快減速 (ease-out)，或者用貝塞爾曲線做出更復(fù)雜的效果。

Codepen 上的源代碼

標(biāo)簽： 網(wǎng)站策劃 網(wǎng)站動(dòng)畫(huà)效果 網(wǎng)頁(yè)動(dòng)畫(huà) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。