創(chuàng)新互聯(lián)編者，從創(chuàng)新互聯(lián)的前端設(shè)計(jì)師哪里，的到新的技術(shù)——《十二大網(wǎng)頁設(shè)計(jì)中運(yùn)用動畫方法》分享給大家。

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

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

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

在本文中，我會逐個介紹這十二個原則，并討論它們怎樣運(yùn)用在網(wǎng)頁中。你能在 Codepen 找到它們?nèi)康拈_源 HTML 和 CSS 代碼 。

擠壓和拉伸 (Squash and stretch)

Squash and stretch

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

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

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

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

預(yù)備動作 (Anticipation)

Anticipation

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

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

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

演出布局 (Staging)

Staging

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

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

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

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

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

Straight-Ahead Action and Pose-to-Pose

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

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

有一個例外是定時功能step。通過這個功能，瀏覽器 “steps” 可以把盡可能多的無序幀串清晰。你可以用這種方式繪制一系列圖片并讓瀏覽器按順序顯示出來，這開創(chuàng)了一種逐幀動畫的風(fēng)格。

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

Follow Through and Overlapping Action

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

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

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

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

緩入緩出 (Slow In and Slow Out)

Slow In and Slow Out

對象很少從靜止?fàn)顟B(tài)一下子加速到大速度，它們往往是逐步加速并在停止前變慢。沒有加速和減速，動畫感覺就像機(jī)器人。

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

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

弧線運(yùn)動 (Arc)

Arc-1

雖然對象是更逼真了，當(dāng)它們遵循「緩入緩出」的時候它們很少沿直線運(yùn)動——它們傾向于沿弧線運(yùn)動。

我們有幾種 CSS 的方式來實(shí)現(xiàn)弧線運(yùn)動。一種是結(jié)合多個動畫，比如在彈力球動畫里，可以讓球上下移動的同時讓它右移，這時候球的顯示效果就是沿弧線運(yùn)動。

Arc-2

另外一種是旋轉(zhuǎn)元件，我們可以設(shè)置一個在對象之外的原點(diǎn)來作為它的旋轉(zhuǎn)中心。當(dāng)我們旋轉(zhuǎn)這個對象，它看上去就是沿著弧線運(yùn)動。

次要動作 (Secondary Action)

Secondary Action

雖然主動畫正在發(fā)生，次要動作可以增強(qiáng)它的效果。這就好比某人在走路的時候擺動手臂和傾斜腦袋，或者彈性球彈起的時候揚(yáng)起一些灰塵。

在網(wǎng)頁方面，當(dāng)主要焦點(diǎn)出現(xiàn)的時候就可以開始執(zhí)行次要動作，比如拖拽一個條目到列表中間。

時間節(jié)奏 (Timing)

Timing

動畫的時間節(jié)奏是需要多久去完成，它可以被用來讓看起來很重的對象做很重的動畫，或者用在添加字符的動畫中。

這在網(wǎng)頁上可能只要簡單調(diào)整 animation-duration 或 transition-duration 值。

這很容易讓動畫消耗更多時間，但調(diào)整時間節(jié)奏可以幫動畫的內(nèi)容和交互方式變得更出眾。

夸張手法 (Exaggeration)

Exaggeration

夸張手法在漫畫中是最常用來為某些動作刻畫吸引力和增加戲劇性的，比如一只狼試圖把自己的喉嚨張得更開地去咬東西可能會表現(xiàn)出更恐怖或者幽默的效果。

在網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識中，對象可以通過上下滑動去強(qiáng)調(diào)和刻畫吸引力，比如在填充表單的時候生動部分會比收縮和變淡的部分更突出。

扎實(shí)的描繪 (Solid drawing)

Solid drawing

當(dāng)動畫對象在三維中應(yīng)該加倍注意確保它們遵循透視原則。因?yàn)槿藗兞?xí)慣了生活在三維世界里，如果對象表現(xiàn)得與實(shí)際不符，會讓它看起來很糟糕。這個web前端開發(fā)中，瀏覽器對三維變換的支持已經(jīng)不錯，這意味著我們可以在場景里旋轉(zhuǎn)和放置三維對象，瀏覽器能自動控制它們的轉(zhuǎn)換。

吸引力 (Appeal)

Appeal

吸引力是藝術(shù)作品的特質(zhì)，讓我們與藝術(shù)家的想法連接起來。就像一個演員身上的魅力，是注重細(xì)節(jié)和動作相結(jié)合而打造吸引性的結(jié)果。

精心制作網(wǎng)頁上的動畫可以打造出吸引力，電子商務(wù)網(wǎng)站建設(shè)案例用大量的動畫，可增加它們結(jié)賬流程的可靠性。

網(wǎng)頁標(biāo)題：十二大網(wǎng)頁設(shè)計(jì)中運(yùn)用動畫方法
地址分享：http://jinyejixie.com/news/159343.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站策劃、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)