網頁動畫的十二原則

譯文經做者 CSS Animation 受權轉載
原文地址：Animation Principles for the Web

做爲前端的設計師和工程師，咱們用 CSS 去作樣式、定位並建立出好看的網站。咱們常常用 CSS 去添加頁面的運動過渡效果甚至動畫，但咱們常常作的東西不會超過這些。

動效是一個有助於訪客和消費者理解咱們設計的強有力工具。這裏有些原則能最大限度地應用在咱們的工做中。

迪士尼通過基礎工做練習的長時間累積，在 1981 年出版的 The Illusion of Life: Disney Animation 一書中發表了動畫的十二個原則 (12 Principles of Animation) 。這些原則描述了動畫能怎樣用於讓觀衆相信本身沉浸在現實世界中。

在本文中，我會逐個介紹這十二個原則，並討論它們怎樣運用在網頁中。你能在 Codepen 找到它們所有的開源 HTML 和 CSS 代碼 。

---

擠壓和拉伸 (Squash and stretch)

Squash and stretch

這是物體存在質量且運動時質量保持不變的概念。當一個球在彈跳時，碰擊到地面會變扁，恢復的時間會愈來愈短。

建立對象的時候最有用的方法是參照實物，好比人、時鐘和彈性球。

當它和網頁元件一塊兒工做時可能會忽略這個原則。DOM 對象不必定和實物相關，它會按須要在屏幕上縮放。例如，一個按鈕會變大並變成一個信息框，或者錯誤信息會出現和消失。

儘管如此，擠壓和伸縮效果能夠爲一個對象增長實物的感受。甚至一些形狀上的小變化就能夠創造出細微但搶眼的效果。

Codepen 上的源代碼

---

預備動做 (Anticipation)

Anticipation

運動不傾向於忽然發生。在現實生活中，不管是一個球在掉到桌子前就開始滾動，或是一我的屈膝準備起跳，運動一般有着某種事先的累積。

咱們能用它去讓咱們的過渡動畫顯得更逼真。預備動做能夠是一個細微的反彈，幫人們理解什麼對象將在屏幕中發生變化並留下痕跡。

例如，懸停在一個元件上時能夠在它變大前稍微縮小，在初始列表中添加額外的條目來介紹其它條目的移除方法。

Codepen 上的源代碼

---

演出佈局 (Staging)

Staging

演出佈局是確保對象在場景中得以聚焦，讓場景中的其它對象和視覺在主動畫發生的地方讓位。這意味着要麼把主動畫放到突出的位置，要麼模糊其它元件來讓用戶專一於看他們須要看的東西。

在網頁方面，一種方法是用 model 覆蓋在某些內容上。在現有頁面添加一個遮罩並把那些主要關注的內容前置展現。

另外一種方法是用動做。當不少對象在運動，你很難知道哪些值得關注。若是其它全部的動做中止，只留一個在運動，即便動得很微弱，這均可以讓對象更容易被察覺。

還有一種方法是作一個晃動和閃爍的按鈕來簡單地建議用戶好比他們可能要保存文檔。屏幕保持靜態，因此再細微的動做也會突顯出來。

Codepen 上的源代碼

---

連續運動和姿態對應 (Straight-Ahead Action and Pose-to-Pose)

Straight-Ahead Action and Pose-to-Pose

連續運動是繪製動畫的每一幀，姿態對應是一般由一個 assistant 在定義一系列關鍵幀後填充間隔。

大多數網頁動畫用的是姿態對應：關鍵幀之間的過渡能夠經過瀏覽器在每一個關鍵幀之間的插入儘量多的幀使動畫流暢。

有一個例外是定時功能step。經過這個功能，瀏覽器 "steps" 能夠把儘量多的無序幀串清晰。你能夠用這種方式繪製一系列圖片並讓瀏覽器按順序顯示出來，這開創了一種逐幀動畫的風格。

Codepen 上的源代碼

---

跟隨和重疊動做 (Follow Through and Overlapping Action)

Follow Through and Overlapping Action

事情並不總在同一時間發生。當一輛車從急剎到停下，車子會向前傾、有煙從輪胎冒出來、車裏的司機繼續向前衝。

這些細節是跟隨和重疊動做的例子。它們在網頁中能被用做幫助強調什麼東西被中止，並不會被遺忘。例如一個條目可能在滑動時稍滑微遠了些，但它本身會糾正到正確位置。

要創造一個重疊動做的感受，咱們可讓元件以稍微不一樣的速度移動到每處。這是一種在 iOS 系統的視窗 (View) 過渡中被運用得很好的方法。一些按鈕和元件以不一樣速率運動，總體效果會比所有東西以相同速率運動要更逼真，並留出時間讓訪客去適當理解變化。

在網頁方面，這可能意味着讓過渡或動畫的效果以不一樣速度來運行。

Codepen 上的源代碼

---

緩入緩出 (Slow In and Slow Out)

Slow In and Slow Out

對象不多從靜止狀態一會兒加速到最大速度，它們每每是逐步加速並在中止前變慢。沒有加速和減速，動畫感受就像機器人。

在 CSS 方面，緩入緩出很容易被理解，在一個動畫過程當中計時功能是一種描述變化速率的方式。

使用計時功能，動畫能夠由慢加速 (ease-in)、由快減速 (ease-out)，或者用貝塞爾曲線作出更復雜的效果。

Codepen 上的源代碼

---

弧線運動 (Arc)

Arc-1

雖然對象是更逼真了，當它們遵循「緩入緩出」的時候它們不多沿直線運動——它們傾向於沿弧線運動。

咱們有幾種 CSS 的方式來實現弧線運動。一種是結合多個動畫，好比在彈力球動畫裏，可讓球上下移動的同時讓它右移，這時候球的顯示效果就是沿弧線運動。

Arc-2

另一種是旋轉元件，咱們能夠設置一個在對象以外的原點來做爲它的旋轉中心。當咱們旋轉這個對象，它看上去就是沿着弧線運動。

Codepen 上的源代碼：動畫1、動畫2

---

次要動做 (Secondary Action)

Secondary Action

雖然主動畫正在發生，次要動做能夠加強它的效果。這就比如某人在走路的時候擺動手臂和傾斜腦殼，或者彈性球彈起的時候揚起一些灰塵。

在網頁方面，當主要焦點出現的時候就能夠開始執行次要動做，好比拖拽一個條目到列表中間。

Codepen 上的源代碼

---

時間節奏 (Timing)

Timing

動畫的時間節奏是須要多久去完成，它能夠被用來讓看起來很重的對象作很重的動畫，或者用在添加字符的動畫中。

這在網頁上可能只要簡單調整 animation-duration 或 transition-duration 值。

這很容易讓動畫消耗更多時間，但調整時間節奏能夠幫動畫的內容和交互方式變得更出衆。

Codepen 上的源代碼

---

誇張手法 (Exaggeration)

Exaggeration

誇張手法在漫畫中是最經常使用來爲某些動做刻畫吸引力和增長戲劇性的，好比一隻狼試圖把本身的喉嚨張得更開地去咬東西可能會表現出更恐怖或者幽默的效果。

在網頁中，對象能夠經過上下滑動去強調和刻畫吸引力，好比在填充表單的時候生動部分會比收縮和變淡的部分更突出。

Codepen 上的源代碼

---

紮實的描繪 (Solid drawing)

Solid drawing

當動畫對象在三維中應該加倍注意確保它們遵循透視原則。由於人們習慣了生活在三維世界裏，若是對象表現得與實際不符，會讓它看起來很糟糕。

現在瀏覽器對三維變換的支持已經不錯，這意味着咱們能夠在場景裏旋轉和放置三維對象，瀏覽器能自動控制它們的轉換。

Codepen 上的源代碼

---

吸引力 (Appeal)

Appeal

吸引力是藝術做品的特質，讓咱們與藝術家的想法鏈接起來。就像一個演員身上的魅力，是注重細節和動做相結合而打造吸引性的結果。

精心製做網頁上的動畫能夠打造出吸引力，例如 Stripe 這樣的公司用了大量的動畫去增長它們結帳流程的可靠性。

Codepen 上的源代碼