網(wǎng)頁動畫的十二原則
2019-03-26 來源：孫永杰的BLOG
作為前端的設(shè)計師和工程師，我們用 CSS 去做樣式、定位并創(chuàng)建出好看的網(wǎng)站。我們經(jīng)常用 CSS 去添加頁面的運動過渡效果甚至動畫，但我們經(jīng)常做的東西不會超過這些。
動效是一個有助于訪客和消費者理解我們設(shè)計的強有力工具。這里有些原則能最大限度地應(yīng)用在我們的工作中。
迪士尼經(jīng)過基礎(chǔ)工作練習(xí)的長時間累積，在 1981 年出版的 The Illusion of Life: Disney Animation 一書中發(fā)表了動畫的十二個原則 (12 Principles of Animation) 。這些原則描述了動畫能怎樣用于讓觀眾相信自己沉浸在現(xiàn)實世界中。
在本文中，我會逐個介紹這十二個原則，并討論它們怎樣運用在網(wǎng)頁中。你能在 Codepen 找到它們?nèi)康拈_源 HTML 和 CSS 代碼 。
擠壓和拉伸 (Squash and stretch)
Squash and stretch
這是物體存在質(zhì)量且運動時質(zhì)量保持不變的概念。當一個球在彈跳時，碰擊到地面會變扁，恢復(fù)的時間會越來越短。
創(chuàng)建對象的時候最有用的方法是參照實物，比如人、時鐘和彈性球。
當它和網(wǎng)頁元件一起工作時可能會忽略這個原則。DOM 對象不一定和實物相關(guān)，它會按需要在屏幕上縮放。例如，一個按鈕會變大并變成一個信息框，或者錯誤信息會出現(xiàn)和消失。
盡管如此，擠壓和伸縮效果可以為一個對象增加實物的感覺。甚至一些形狀上的小變化就可以創(chuàng)造出細微但搶眼的效果。
Codepen 上的源代碼
預(yù)備動作 (Anticipation)
Anticipation
運動不傾向于突然發(fā)生。在現(xiàn)實生活中，無論是一個球在掉到桌子前就開始滾動，或是一個人屈膝準備起跳，運動通常有著某種事先的累積。
我們能用它去讓我們的過渡動畫顯得更逼真。預(yù)備動作可以是一個細微的反彈，幫人們理解什么對象將在屏幕中發(fā)生變化并留下痕跡。
例如，懸停在一個元件上時可以在它變大前稍微縮小，在初始列表中添加額外的條目來介紹其它條目的移除方法。
Codepen 上的源代碼
演出布局 (Staging)
Staging
演出布局是確保對象在場景中得以聚焦，讓場景中的其它對象和視覺在主動畫發(fā)生的地方讓位。這意味著要么把主動畫放到突出的位置，要么模糊其它元件來讓用戶專注于看他們需要看的東西。
在網(wǎng)頁方面，一種方法是用 model 覆蓋在某些內(nèi)容上。在現(xiàn)有頁面添加一個遮罩并把那些主要關(guān)注的內(nèi)容前置展示。
另一種方法是用動作。當很多對象在運動，你很難知道哪些值得關(guān)注。如果其它所有的動作停止，只留一個在運動，即使動得很微弱，這都可以讓對象更容易被察覺。
還有一種方法是做一個晃動和閃爍的按鈕來簡單地建議用戶比如他們可能要保存文檔。屏幕保持靜態(tài)，所以再細微的動作也會突顯出來。
Codepen 上的源代碼
連續(xù)運動和姿態(tài)對應(yīng) (Straight-Ahead Action and Pose-to-Pose)
Straight-Ahead Action and Pose-to-Pose
連續(xù)運動是繪制動畫的每一幀，姿態(tài)對應(yīng)是通常由一個 assistant 在定義一系列關(guān)鍵幀后填充間隔。
大多數(shù)網(wǎng)頁動畫用的是姿態(tài)對應(yīng)：關(guān)鍵幀之間的過渡可以通過瀏覽器在每個關(guān)鍵幀之間的插入盡可能多的幀使動畫流暢。
有一個例外是定時功能step。通過這個功能，瀏覽器 "steps" 可以把盡可能多的無序幀串清晰。你可以用這種方式繪制一系列圖片并讓瀏覽器按順序顯示出來，這開創(chuàng)了一種逐幀動畫的風(fēng)格。
Codepen 上的源代碼
跟隨和重疊動作 (Follow Through and Overlapping Action)
Follow Through and Overlapping Action
事情并不總在同一時間發(fā)生。當一輛車從急剎到停下，車子會向前傾、有煙從輪胎冒出來、車里的司機繼續(xù)向前沖。
這些細節(jié)是跟隨和重疊動作的例子。它們在網(wǎng)頁中能被用作幫助強調(diào)什么東西被停止，并不會被遺忘。例如一個條目可能在滑動時稍滑微遠了些，但它自己會糾正到正確位置。
要創(chuàng)造一個重疊動作的感覺，我們可以讓元件以稍微不同的速度移動到每處。這是一種在 iOS 系統(tǒng)的視窗 (View) 過渡中被運用得很好的方法。一些按鈕和元件以不同速率運動，整體效果會比全部東西以相同速率運動要更逼真，并留出時間讓訪客去適當理解變化。
在網(wǎng)頁方面，這可能意味著讓過渡或動畫的效果以不同速度來運行。
Codepen 上的源代碼
緩入緩出 (Slow In and Slow Out)
Slow In and Slow Out
對象很少從靜止狀態(tài)一下子加速到最大速度，它們往往是逐步加速并在停止前變慢。沒有加速和減速，動畫感覺就像機器人。
在 CSS 方面，緩入緩出很容易被理解，在一個動畫過程中計時功能是一種描述變化速率的方式。
使用計時功能，動畫可以由慢加速 (ease-in)、由快減速 (ease-out)，或者用貝塞爾曲線做出更復(fù)雜的效果。
Codepen 上的源代碼
標簽： 網(wǎng)站策劃 網(wǎng)站動畫效果 網(wǎng)頁動畫
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
