2014-9-29 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.uisdc.com/animation-save-flat-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
編者按：動(dòng)效現(xiàn)在是扁平化身邊的大紅人，哪里都有它的身影，動(dòng)效能否為扁平化增光？設(shè)計(jì)師有什么利器可以繪制動(dòng)效？昨天發(fā)現(xiàn)一篇好文，關(guān)于這兩方面都有實(shí)在的干貨分享，建議同學(xué)們當(dāng)機(jī)立斷，先轉(zhuǎn)后贊，特別要記得看。
作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，我們需要努力讓我們的技術(shù)與技巧與時(shí)俱進(jìn)。我們不用追隨每一個(gè)時(shí)代潮流（比如長(zhǎng)投影），但是我們的確需要隨著網(wǎng)絡(luò)的發(fā)展與成熟，不斷學(xué)習(xí)并提高我們的技巧。
網(wǎng)頁(yè)設(shè)計(jì)產(chǎn)業(yè)最近開始火熱的新發(fā)展之一便是動(dòng)效，越來越多的公司在他們的應(yīng)用和網(wǎng)站中放入動(dòng)效以取悅用戶，從競(jìng)爭(zhēng)對(duì)手中脫穎而出以及提升產(chǎn)品的可用性。
動(dòng)效需求如此之高的另一個(gè)原因在于網(wǎng)頁(yè)扁平化的潮流。扁平化設(shè)計(jì)整體來說是挺不錯(cuò)的，而且使得人們尋求新的方式來改善它為數(shù)不多的問題。
現(xiàn)如今，越來越多的公司接受最小化的“扁平設(shè)計(jì)”美學(xué)。網(wǎng)站之間開始缺乏品牌化差異，看起來都差不多了。這使得設(shè)計(jì)師開始尋求其它方式讓網(wǎng)站變得引人入勝，或令用戶感到興奮。
此時(shí)動(dòng)效閃亮登場(chǎng)。動(dòng)效如同鹽之于薯?xiàng)l；沒有它，它們有點(diǎn)冷漠、缺乏風(fēng)味。讓你設(shè)計(jì)中的不同元素動(dòng)起來，你就可以添加一點(diǎn)令人興奮的要素，也可以通過具有創(chuàng)意且有幫助性的動(dòng)效來取悅用戶。
扁平化設(shè)計(jì)中的另外一個(gè)問題就是用戶與網(wǎng)站或應(yīng)用交互的時(shí)候，有可能會(huì)失去他們所處位置的概念。當(dāng)按鈕看起來不再像是個(gè)按鈕，其他東西也看起來逐漸趨同，用戶會(huì)開始搞不清楚在他們點(diǎn)擊那些元素之后，到底會(huì)發(fā)生什么。
我們可以通過為不同狀態(tài)（如懸停或點(diǎn)擊）的按鈕設(shè)計(jì)不同的動(dòng)畫效果，來解決這個(gè)問題，比如Colin Garven的提交按鈕：
最后，我想闡述的一個(gè)問題是如何告知用戶發(fā)生了變化?，F(xiàn)在，很多現(xiàn)代網(wǎng)絡(luò)應(yīng)用都會(huì)使用諸如AngularJs以及Node.js這樣強(qiáng)大的工具來建立“單頁(yè)面、實(shí)時(shí)更新”的應(yīng)用。想想Gmail：不用刷新頁(yè)面就可以獲取新郵件，當(dāng)有人給你發(fā)新郵件的時(shí)候，它自己就會(huì)彈出來了。
如果頁(yè)面發(fā)生了改變或加載了新內(nèi)容，而用戶沒有獲得那些通知或者明確的提醒，這可就成問題了。如果頁(yè)面已經(jīng)保存了，那么我們就需要看到什么，以告訴我們這個(gè)應(yīng)用正在工作，它在后臺(tái)保存了我們的工作。
動(dòng)效就是當(dāng)不同事件發(fā)生時(shí)，用來提醒用戶的絕佳方式。
比如說，你有一張登記了下一次聚會(huì)或者會(huì)議的名單。每當(dāng)有新人登記，你就使用node.js實(shí)時(shí)將其添加到名單上，這樣他們就不用刷新頁(yè)面。很好，這對(duì)用戶來說很有幫助。然而人們要怎么知道有新人登記了呢？
我們需要的只是一個(gè)小小的動(dòng)效，讓人們看到有個(gè)人，登記了。從頁(yè)面頂端拋下來一個(gè)小小的通知信封如何？或者讓這個(gè)新人的名字淡入進(jìn)名單，并把他的名字高亮以區(qū)別出他是新登記的？
所有這些都是微妙的效果，但是這確實(shí)就是說得過去的產(chǎn)品和那些真正令用戶喜悅的產(chǎn)品之間的區(qū)別。
還記得IE6和網(wǎng)景（Netscape）嗎？還記得我們要擔(dān)心是否每個(gè)人都開啟了JavaScript，以及要用表格來為網(wǎng)頁(yè)布局的日子嗎？
我們已經(jīng)走過了漫長(zhǎng)的道路，我們有了強(qiáng)大的HTML 5支持、CSS 3還有響應(yīng)式設(shè)計(jì)，它們的組合可以為動(dòng)起來的網(wǎng)頁(yè)提供驚人的選擇。
Html 5有多驚人，來這里見識(shí)一下，特別好玩呦！《體驗(yàn)未來：10個(gè)會(huì)讓你驚嘆不已的HTML5畫布技術(shù)應(yīng)用演示》
CSS3動(dòng)效
現(xiàn)在，所有的主流瀏覽器都支持大部分乃至全部的W3C建議的標(biāo)準(zhǔn)CSS 3特性。作為設(shè)計(jì)師，這給了我們巨大的潛力去創(chuàng)建簡(jiǎn)單而引人注目的動(dòng)效，讓生活氣息進(jìn)入靜態(tài)頁(yè)面。
Transitions
CSS過渡給你在兩種不同狀態(tài)之間創(chuàng)建簡(jiǎn)單過渡的能力。比如說你有一個(gè)簡(jiǎn)單的按鈕，你想要在鼠標(biāo)懸停于其上的時(shí)候，改變顏色并讓它稍稍向下一點(diǎn)，此時(shí)使用css過渡就是絕佳選擇。
Keyframe動(dòng)效
關(guān)鍵幀是CSS 3特性中的強(qiáng)大功能，可以讓你創(chuàng)建自定義動(dòng)效序列。它允許你控制開始時(shí)間、過渡方式、持續(xù)時(shí)間、延遲、在持續(xù)時(shí)間中重復(fù)多少次、動(dòng)效方向等等等等。你甚至可以在同一個(gè)頁(yè)面元素中使用多個(gè)動(dòng)效。
SVG圖像
“成熟網(wǎng)絡(luò)”的超贊新功能之一就是SVG圖像。我們終于有能在不同尺寸和分辨率的屏幕上高質(zhì)量自由縮放的圖像了。不僅如此，SVG比PNG圖像更為強(qiáng)大，因?yàn)槟憧梢允褂肅SS和JS使之產(chǎn)生交互性。這使得我們可以創(chuàng)建令人印象深刻的動(dòng)效，而以前我們只能用GIF或者Flash來完成這些事情。
看看 這個(gè)動(dòng)畫gif，已經(jīng)使用CSS和SVG重建了：
動(dòng)效地址：http://codepen.io/bleepbloop/pen/Kkdzq
SVG動(dòng)效真正有用的一點(diǎn)是創(chuàng)建可動(dòng)的表格和圖表，并可以縮放到任意尺寸?？纯催@個(gè)使用JSFiddle的簡(jiǎn)單例子：
觀看地址：http://jsfiddle.net/roemer/rgMYP/
SVG的可能性幾乎是無(wú)止境的！
HTML 5畫布（Canvas）
另外一項(xiàng)令人激動(dòng)的技術(shù)，是所有瀏覽器已經(jīng)支持許久的HTML 5畫布。畫布元素用于繪制頁(yè)面上的圖形。
它和SVG相似，但是有幾點(diǎn)不同。首先，它是一個(gè)位圖而非矢量圖。這意味著它在執(zhí)行復(fù)雜繪圖及動(dòng)畫的時(shí)候表現(xiàn)更好，但是在高分辨率屏幕上的縮放性不太好。
畫布的另外一大缺點(diǎn)就是，它沒有可供操作的DOM元素。這意味著當(dāng)你想要改變或者為其添加動(dòng)效的時(shí)候，你需要重繪整個(gè)畫面。
盡管有著這樣或那樣的缺陷，畫布仍然是繪制復(fù)雜動(dòng)效和畫面的一大利器。
Javascript動(dòng)效庫(kù)
盡管CSS 3動(dòng)畫變得愈加強(qiáng)大，但仍有些許情況需要使用Javascript動(dòng)效。
時(shí)刻都有越來越的庫(kù)涌現(xiàn)出來，為我們帶來了驚艷的動(dòng)效，而使用它們也只是我們以前在Javascript動(dòng)效上所付出資源的萬(wàn)分之一。
snap.svg是一個(gè)讓你操作SVG資源如同使用jQuery操作DOM一樣輕松的工具。它有一個(gè)超級(jí)豐富的動(dòng)效庫(kù)，里面有很多簡(jiǎn)單的事件可以讓你的SVG文件動(dòng)起來。
gsap.js是一套專業(yè)工具，用于在所有主流瀏覽器上工作的腳本化高性能HTML 5動(dòng)畫。它的動(dòng)畫效果是jQuery的20倍，某些情況下甚至比CSS3動(dòng)效還要快。60fps我們來啦！
transit.js是一個(gè)jQuery庫(kù)，使用超平滑CSS過渡及變換效果取代了jQuery中的動(dòng)畫模塊。其美妙之處在于它也使用jQuery的 $(‘…’).animate語(yǔ)法。
velocity.js類似于Transit，也是使用于jQuery相同的語(yǔ)法，你需要做的就是引入這個(gè)庫(kù)，然后把jQuery的動(dòng)畫用.velocity()替換。
scrollReveal是一款開源js庫(kù)，當(dāng)頁(yè)面元素進(jìn)入視口時(shí)，它可以幫助你創(chuàng)建并維護(hù)這個(gè)元素。
bounce.js是一個(gè)新的工具，用于產(chǎn)生令人興奮的CSS 3關(guān)鍵幀動(dòng)畫。
動(dòng)畫真正騰飛的最主要原因，其實(shí)是現(xiàn)如今的設(shè)備越來越強(qiáng)大了。
比如說iPhone 5s，擁有一顆超級(jí)動(dòng)力A7芯片。
Extreme Tech說：“CPU不僅是它Swift前身的漸進(jìn)演化，它是一個(gè)完全不同的巨獸，更類似于Intel或AMD CPU的“大核心”而非“小核心”CPU?！?/p>
此外，隨著iOS8的發(fā)布，蘋果會(huì)發(fā)布Metal，它是一個(gè)非常強(qiáng)大的3D渲染引擎，可以讓你在移動(dòng)設(shè)備上創(chuàng)建桌面般的游戲。
一些安卓手機(jī)公司已經(jīng)在設(shè)備里內(nèi)置盡可能多的內(nèi)存，像LG G3內(nèi)置了高達(dá)3GB的內(nèi)存。我有一臺(tái)幾年前的筆記本電腦，也差不多只有那么多內(nèi)存。
所有這一切說明，我們不僅可以在桌面計(jì)算機(jī)上運(yùn)行流暢動(dòng)畫，在手機(jī)、平板以及其他移動(dòng)設(shè)備上也可以同樣流暢。
動(dòng)畫可以真正使你的產(chǎn)品、應(yīng)用或者網(wǎng)站更加便于使用，并易于為用戶所接受。這是因?yàn)椋?/p>
Kickstarter認(rèn)為，一個(gè)好的活動(dòng)視頻有可能導(dǎo)致你的活動(dòng)非常成功，也有可能默默無(wú)聞。最好的活動(dòng)使用精心設(shè)計(jì)的故事以帶來令人激動(dòng)的感覺，并為自己的產(chǎn)品或活動(dòng)造勢(shì)。動(dòng)畫在網(wǎng)站或應(yīng)用上所做的事是一樣的。它可以讓人們熱烈討論你的應(yīng)用，而讓其他應(yīng)用沉睡在應(yīng)用墓園中。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com