作爲一個網頁設計師，我們需要努力讓我們的技術與技巧與時俱進(jìn)。我們不用追随每一個時代潮流（比如長(cháng)投影），但是我們的确需要随著(zhe)網絡的發(fā)展與成(chéng)熟，不斷學(xué)習并提高我們的技巧。

　　網頁設計産業最近開(kāi)始火熱的新發(fā)展之一便是動效，越來越多的公司在他們的應用和網站中放入動效以取悅用戶，從競争對(duì)手中脫穎而出以及提升産品的可用性。

　　動效需求如此之高的另一個原因在于網頁扁平化的潮流。扁平化設計整體來說是挺不錯的，而且使得人們尋求新的方式來改善它爲數不多的問題。

　　現如今，越來越多的公司接受最小化的“扁平設計”美學(xué)。網站之間開(kāi)始缺乏品牌化差異，看起(qǐ)來都(dōu)差不多了。這(zhè)使得設計師開(kāi)始尋求其它方式讓網站變得引人入勝，或令用戶感到興奮。

　　此時動效閃亮登場。動效如同鹽之于薯條；沒(méi)有它，它們有點冷漠、缺乏風味。讓你設計中的不同元素動起(qǐ)來，你就可以添加一點令人興奮的要素，也可以通過(guò)具有創意且有幫助性的動效來取悅用戶。

　　扁平化設計中的另外一個問題就是用戶與網站或應用交互的時候，有可能(néng)會失去他們所處位置的概念。當按鈕看起(qǐ)來不再像是個按鈕，其他東西也看起(qǐ)來逐漸趨同，用戶會開(kāi)始搞不清楚在他們點擊那些元素之後(hòu)，到底會發(fā)生什麼(me)。

　　我們可以通過(guò)爲不同狀态（如懸停或點擊）的按鈕設計不同的動畫效果，來解決這(zhè)個問題，比如Colin Garven的

　　最後(hòu)，我想闡述的一個問題是如何告知用戶發(fā)生了變化。現在，很多現代網絡應用都(dōu)會使用諸如AngularJs以及Node.js這(zhè)樣(yàng)強大的工具來建立“單頁面(miàn)、實時更新”的應用。想想Gmail：不用刷新頁面(miàn)就可以獲取新郵件，當有人給你發(fā)新郵件的時候，它自己就會彈出來了。

　　如果頁面(miàn)發(fā)生了改變或加載了新内容，而用戶沒(méi)有獲得那些通知或者明确的提醒，這(zhè)可就成(chéng)問題了。如果頁面(miàn)已經(jīng)保存了，那麼(me)我們就需要看到什麼(me)，以告訴我們這(zhè)個應用正在工作，它在後(hòu)台保存了我們的工作。

　　動效就是當不同事(shì)件發(fā)生時，用來提醒用戶的絕佳方式。

　　比如說，你有一張登記了下一次聚會或者會議的名單。每當有新人登記，你就使用node.js實時將(jiāng)其添加到名單上，這(zhè)樣(yàng)他們就不用刷新頁面(miàn)。很好(hǎo)，這(zhè)對(duì)用戶來說很有幫助。然而人們要怎麼(me)知道(dào)有新人登記了呢？

　　我們需要的隻是一個小小的動效，讓人們看到有個人，登記了。從頁面(miàn)頂端抛下來一個小小的通知信封如何？或者讓這(zhè)個新人的名字淡入進(jìn)名單，并把他的名字高亮以區别出他是新登記的？

　　所有這(zhè)些都(dōu)是微妙的效果，但是這(zhè)确實就是說得過(guò)去的産品和那些真正令用戶喜悅的産品之間的區别。

　　現在，所有的主流浏覽器都(dōu)支持大部分乃至全部的W3C建議的标準CSS 3特性。作爲設計師，這(zhè)給了我們巨大的潛力去創建簡單而引人注目的動效，讓生活氣息進(jìn)入靜态頁面(miàn)。

　　CSS過(guò)渡給你在兩(liǎng)種(zhǒng)不同狀态之間創建簡單過(guò)渡的能(néng)力。比如說你有一個簡單的按鈕，你想要在鼠标懸停于其上的時候，改變顔色并讓它稍稍向(xiàng)下一點，此時使用css過(guò)渡就是絕佳選擇。

　　關鍵幀是CSS 3特性中的強大功能(néng)，可以讓你創建自定義動效序列。它允許你控制開(kāi)始時間、過(guò)渡方式、持續時間、延遲、在持續時間中重複多少次、動效方向(xiàng)等等等等。你甚至可以在同一個頁面(miàn)元素中使用多個動效。

　　“成(chéng)熟網絡”的超贊新功能(néng)之一就是SVG圖像。我們終于有能(néng)在不同尺寸和分辨率的屏幕上高質量自由縮放的圖像了。不僅如此，SVG比PNG圖像更爲強大，因爲你可以使用CSS和JS使之産生交互性。這(zhè)使得我們可以創建令人印象深刻的動效，而以前我們隻能(néng)用GIF或者Flash來完成(chéng)這(zhè)些事(shì)情。

　　SVG動效真正有用的一點是創建可動的表格和圖表，并可以縮放到任意尺寸。看看這(zhè)個使用JSFiddle的簡單例子：

　　觀看地址：http://jsfiddle.net/roemer/rgMYP/

　　SVG的可能(néng)性幾乎是無止境的！

　　HTML 5畫布（Canvas）

　　另外一項令人激動的技術，是所有浏覽器已經(jīng)支持許久的HTML 5畫布。畫布元素用于繪制頁面(miàn)上的圖形。

　　它和SVG相似，但是有幾點不同。首先，它是一個位圖而非矢量圖。這(zhè)意味著(zhe)它在執行複雜繪圖及動畫的時候表現更好(hǎo)，但是在高分辨率屏幕上的縮放性不太好(hǎo)。

　　畫布的另外一大缺點就是，它沒(méi)有可供操作的DOM元素。這(zhè)意味著(zhe)當你想要改變或者爲其添加動效的時候，你需要重繪整個畫面(miàn)。

　　盡管有著(zhe)這(zhè)樣(yàng)或那樣(yàng)的缺陷，畫布仍然是繪制複雜動效和畫面(miàn)的一大利器。

　　時刻都(dōu)有越來越的庫湧現出來，爲我們帶來了驚豔的動效，而使用它們也隻是我們以前在Java script動效上所付出資源的萬分之一。

　　動畫真正騰飛的最主要原因，其實是現如今的設備越來越強大了。

　　Extreme Tech說：“CPU不僅是它Swift前身的漸進(jìn)演化，它是一個完全不同的巨獸，更類似于Intel或AMD CPU的“大核心”而非“小核心”CPU。”

　　此外，随著(zhe)iOS8的發(fā)布，蘋果會發(fā)布Metal，它是一個非常強大的3D渲染引擎，可以讓你在移動設備上創建桌面(miàn)般的遊戲。

　　一些安卓手機公司已經(jīng)在設備裡(lǐ)内置盡可能(néng)多的内存，像LG G3内置了高達3GB的内存。我有一台幾年前的筆記本電腦，也差不多隻有那麼(me)多内存。

　　所有這(zhè)一切說明，我們不僅可以在桌面(miàn)計算機上運行流暢動畫，在手機、平闆以及其他移動設備上也可以同樣(yàng)流暢。

　　動畫可以真正使你的産品、應用或者網站更加便于使用，并易于爲用戶所接受。這(zhè)是因爲：

　　　它能(néng)給出事(shì)情發(fā)生的環境；
　　　它讓人們參與；
　　　它讓你的公司脫穎而出；
　　　人們喜歡它們。
　　Kickstarter認爲，一個好(hǎo)的活動視頻有可能(néng)導緻你的活動非常成(chéng)功，也有可能(néng)默默無聞。最好(hǎo)的活動使用精心設計的故事(shì)以帶來令人激動的感覺，并爲自己的産品或活動造勢。動畫在網站或應用上所做的事(shì)是一樣(yàng)的。它可以讓人們熱烈讨論你的應用，而讓其他應用沉睡在應用墓園中。