CSS3和HTML5的發(fā)展，越來越多狂拽炫酷叼炸天的動效在網頁設計上遍地開(kāi)花，根據最新的浏覽器市場份額報告，IE6的份額已經(jīng)降到了5.21%，這(zhè)簡直是一個喜大普奔的消息，做動效可以完全不care低端浏覽器的時(shí)代已經(jīng)在向(xiàng)我們招手了。俗話說(shuō)得好(hǎo)，顔值不夠，動效來湊，Web動效已經(jīng)不僅僅是網頁設計的潤滑劑了，它的功能(néng)更多的體現在了交互邏輯、視覺渲染和創新實踐上，上能(néng)引人注目，下能(néng)潛移默化。

　　下面(miàn)將(jiāng)通過(guò)經(jīng)典的黃金圈法則來爲大家講解我們在B2B聚合頁——1688首頁項目上的動效設計，主要分爲三個部分，動效設計的目的、方法和方案。

　　首先來一發(fā)大師金句，迪士尼動畫大師乃特維克的畢生經(jīng)驗濃縮成(chéng)一句話就(jiù)是“動畫的一切皆在于時(shí)間點和空間幅度”，動效設計和做動畫是一脈相通的，我們不是要做寫實主義的動畫，而是要通過(guò)時(shí)間點和空間幅度的設置爲用戶建立運動的可信度。

　　在設計開(kāi)發(fā)的過(guò)程中，當設計師做好(hǎo)了一套靜态頁面(miàn)而且設想出N種(zhǒng)有趣的交互動畫，再交付前端進(jìn)行重構還(hái)原頁面(miàn)的時(shí)候，由于無法提供精确的動态參數，導緻溝通和制作的成(chéng)本增加，而最終的測試demo也差強人意。因此，我們在1688首頁項目的動效設計中總結歸納出一套适于設計師表達動效概念的方法和流程。

　　動效設計目的

　　首先，爲什麼(me)做動效，在動效設計的初期階段，我們需要從業務和用戶兩(liǎng)個方面(miàn)對(duì)對(duì)項目本身進(jìn)行一個需求分析，從中得出動效在其中的作用，業務方面(miàn)是引導用戶，層級信息展示，用戶方面(miàn)是頁面(miàn)過(guò)度，改善用戶體驗，動效設計的目的是爲了自然流暢的呈現B類電商網站信息，并且，體現出專業和誠信的氣質。 

　　動效設計方法

　　接下來，具體到如何做動效，正所謂設計來源于生活，運動過(guò)程的定義都(dōu)是基于我們日常的生活經(jīng)驗的，爲了給B類用戶制造熟悉感，我們設置了一個動效設計的切入點——B類商務特色動作，并爲每一個動作提煉了一個動效方式，包括:

　　蓋章，狀态切換不好(hǎo)把控，動作銜接有難度；

　　交換名片，切換動作可參考；

　　掃碼，科技感過(guò)重，應用較難；

　　包裝，3D動作幅度大，過(guò)度不自然；

　　握手，效果單一，可參考；

　　簽名，這(zhè)個效果是無法應用的；

　　流水線，一個完整的流水線場景中基本包含頁面(miàn)motion的所有動作，可提煉易發(fā)散，同時(shí)，我們B類電商承載了從設計師、原料商、生産商、批發(fā)商、零售商中各個環節的業務，包含底層的支付物流等等，就(jiù)是一個宏觀的傳送帶，因此作爲B2B業務的聚合頁，我們把傳送帶作爲1688首頁動效設計的基本動作。

　　确定好(hǎo)了基本動作之後(hòu)，我們需要結合頁面(miàn)的交互框架對(duì)區塊進(jìn)行一個層次分級，設定節奏，突出重點。從用戶看到一個頁面(miàn)的瞬間開(kāi)始，如果在展示面(miàn)積相同的情況下，用戶的注意力被(bèi)吸引的情況是：動态>顔色>形狀。判斷一個區塊是否需要動效主要基于以下兩(liǎng)點：1.交互上，是否包含隐藏信息；2.視覺上，是否需要輔助渲染。所以，對(duì)于1688首頁上點擊率最高的搜索和隐藏信息最多的類目、banner將(jiāng)會(huì)是我們設計的重點。

　　下面(miàn)我們來具體分析一下剛才确定的三個重點區塊的動效設計，對(duì)于一般的輸入框，需要用戶在輸入框中産生點擊之後(hòu)才能(néng)開(kāi)始輸入操作，在1688首頁項目中，我們改進(jìn)了輸入框的方式，設定了一個阈值的時(shí)間，讓用戶鼠标hover到輸入框後(hòu)，停留時(shí)間超過(guò)阈值則激活輸入框，用戶可以直接進(jìn)行輸入的操作，減少用戶點擊，讓操作更加流暢。 

　　類目區域，共分爲三級菜單，我們用次級物體運動來表達這(zhè)三級菜單之間的關系，附屬性質的次級物體運動是伴随著(zhe)主要物體運動産生的，次級運動相較主要物體運動有一定的延遲，所以我們在類目區域也是通過(guò)運動的時(shí)間差帶來邏輯上的關系，一級菜單牽引出二級菜單，二級菜單牽引出三級菜單。

　　banner的視差滾動效果以及樓層的分屏加載效果是模拟傳送帶的運動過(guò)程，我們把主體看成(chéng)是受力方，傳送帶看成(chéng)是施力方來進(jìn)行分析。整個運動過(guò)程分爲三種(zhǒng)狀态，啓動态、中間态、收尾态，根據牛頓第二定律得到物體分别作勻加速、勻速和勻減速直線運動。

　　根據之前的分析，我們可以繪制出物體運動的速度-時(shí)間曲線和位移-時(shí)間曲線，大家可以看到下面(miàn)這(zhè)條曲線就(jiù)是由上面(miàn)這(zhè)條曲線積分得到的，那麼(me)問題來了！爲什麼(me)動效設計要畫出這(zhè)樣(yàng)的運動曲線呢？

　　前端同學(xué)可以運用曲線進(jìn)行運動定義，CSS屬性中的transition和animation可指定緩動函數，但不支持全部函數，可通過(guò)貝塞爾曲線的繪制達到自定義的運動效果，固定貝塞爾曲線中頭、尾兩(liǎng)個點，通過(guò)這(zhè)兩(liǎng)個點引申出的錨點來确定曲線的弧度，任何運動曲線都(dōu)可以拆解爲一段段的貝塞爾曲線來進(jìn)行定義。 貝塞爾曲線繪制函數：http://cubic-bezier.com/#.63,0,1,1　　 通過(guò)CSS爲運動曲線專門設置的VIP屬性來确定兩(liǎng)個錨點位置，流暢的動效就(jiù)搞定了

　　這(zhè)裡(lǐ)再給大家提供一個更加省事(shì)兒的辦法，SCSS，也就(jiù)是CSS的進(jìn)階版本，還(hái)有Javascript可以直接調用緩動函數庫，大家或許會(huì)對(duì)下面(miàn)這(zhè)種(zhǒng)複雜扭曲的函數有疑惑，其實這(zhè)些是具有反饋效果的運動曲線。根據我們之前的分析，由于1688首頁采用的是内容靠前的設計策略以及簡約的視覺風格，所以我們的動效動作一定是“穩、準、狠”，絕不拖泥帶水，也絕不喧賓奪主，所以這(zhè)樣(yàng)比較Q彈的動作是我們極力避免的。其實這(zhè)些曲線更适合應用在無線端，由于在無線端用戶直接使用手指來進(jìn)行操作，當我們需要表達區塊元素的彈性、紙質或者是卡片的材料隐喻時(shí)，用反饋效果來表達材料和重力是比較恰當的。 緩動函數速查表：http://easings.net/zh-cn#

　　動效設計方案

　　最終我們會(huì)得到一個包含時(shí)間點、關鍵幀、觸發(fā)條件、運動過(guò)程和空間幅度的完整時(shí)間軸，清晰的顯示出頁面(miàn)區塊元素在每一個時(shí)間點的樣(yàng)式和樣(yàng)式之間的過(guò)度，有了這(zhè)樣(yàng)的規範輸出，麻麻再也不用擔心我的動效還(hái)原了。具體動效請線上查看：http://www.1688.com/ 其實今天文中提到的技術方案是有一個保質期的，由于技術的叠代迅猛，也不知道(dào)這(zhè)個保質期能(néng)夠持續多久，但是按照時(shí)間軸和關鍵幀的動效設計思路是不會(huì)過(guò)期的，迪士尼從白雪公主時(shí)期建立的動畫設計精髓到了今天的超能(néng)陸戰隊上依然成(chéng)立，大白的每一個動作設計從本質上來說(shuō)仍舊是時(shí)間點和空間幅度，所以說(shuō)，作爲動效設計師，隻要謹記這(zhè)一點，一個好(hǎo)的動效方案就(jiù)成(chéng)功了一半，另外的一半就(jiù)是結合業務和用戶的思考了。 

　　最後(hòu)總結一下動效設計的工作流程，通過(guò)對(duì)項目需求和架構的綜合分析找到動效的切入點，提煉發(fā)散出一個關鍵動作，結合前端的實現框架，确定流程邏輯和運動，反複實踐檢驗得到最優方案，别忘了爲用戶設置一個驚喜，就(jiù)大功告成(chéng)了！