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

　　下面将通過經典的(de)黃金圈法則來(lái)爲(wéi / wèi)大(dà)家講解我們在(zài)B2B聚合頁——1688首頁項目上(shàng)的(de)動效設計，主要(yào / yāo)分爲(wéi / wèi)三個(gè)部分，動效設計的(de)目的(de)、方法和(hé / huò)方案。

　　首先來(lái)一(yī / yì ／yí)發大(dà)師金句，迪士尼動畫大(dà)師乃特維克的(de)畢生經驗濃縮成一(yī / yì ／yí)句話就(jiù)是(shì)“動畫的(de)一(yī / yì ／yí)切皆在(zài)于(yú)時(shí)間點和(hé / huò)空間幅度”，動效設計和(hé / huò)做動畫是(shì)一(yī / yì ／yí)脈相通的(de)，我們不(bù)是(shì)要(yào / yāo)做寫實主義的(de)動畫，而(ér)是(shì)要(yào / yāo)通過時(shí)間點和(hé / huò)空間幅度的(de)設置爲(wéi / wèi)用戶建立運動的(de)可信度。

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

　　動效設計目的(de)

　　首先，爲(wéi / wèi)什麽做動效，在(zài)動效設計的(de)初期階段，我們需要(yào / yāo)從業務和(hé / huò)用戶兩個(gè)方面對對項目本身進行一(yī / yì ／yí)個(gè)需求分析，從中得出(chū)動效在(zài)其中的(de)作用，業務方面是(shì)引導用戶，層級信息展示，用戶方面是(shì)頁面過度，改善用戶體驗，動效設計的(de)目的(de)是(shì)爲(wéi / wèi)了(le／liǎo)自然流暢的(de)呈現B類電商網站信息，并且，體現出(chū)專業和(hé / huò)誠信的(de)氣質。 

　　動效設計方法

　　接下來(lái)，具體到(dào)如何做動效，正所謂設計來(lái)源于(yú)生活，運動過程的(de)定義都是(shì)基于(yú)我們日常的(de)生活經驗的(de)，爲(wéi / wèi)了(le／liǎo)給B類用戶制造熟悉感，我們設置了(le／liǎo)一(yī / yì ／yí)個(gè)動效設計的(de)切入點——B類商務特色動作，并爲(wéi / wèi)每一(yī / yì ／yí)個(gè)動作提煉了(le／liǎo)一(yī / yì ／yí)個(gè)動效方式，包括:

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

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

　　掃碼，科技感過重，應用較難；

　　包裝，3D動作幅度大(dà)，過度不(bù)自然；

　　握手，效果單一(yī / yì ／yí)，可參考；

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

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

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

　　下面我們來(lái)具體分析一(yī / yì ／yí)下剛才确定的(de)三個(gè)重點區塊的(de)動效設計，對于(yú)一(yī / yì ／yí)般的(de)輸入框，需要(yào / yāo)用戶在(zài)輸入框中産生點擊之(zhī)後才能開始輸入操作，在(zài)1688首頁項目中，我們改進了(le／liǎo)輸入框的(de)方式，設定了(le／liǎo)一(yī / yì ／yí)個(gè)阈值的(de)時(shí)間，讓用戶鼠标hover到(dào)輸入框後，停留時(shí)間超過阈值則激活輸入框，用戶可以(yǐ)直接進行輸入的(de)操作，減少用戶點擊，讓操作更加流暢。 

　　類目區域，共分爲(wéi / wèi)三級菜單，我們用次級物體運動來(lái)表達這(zhè)三級菜單之(zhī)間的(de)關系，附屬性質的(de)次級物體運動是(shì)伴随着主要(yào / yāo)物體運動産生的(de)，次級運動相較主要(yào / yāo)物體運動有一(yī / yì ／yí)定的(de)延遲，所以(yǐ)我們在(zài)類目區域也(yě)是(shì)通過運動的(de)時(shí)間差帶來(lái)邏輯上(shàng)的(de)關系，一(yī / yì ／yí)級菜單牽引出(chū)二級菜單，二級菜單牽引出(chū)三級菜單。

　　banner的(de)視差滾動效果以(yǐ)及樓層的(de)分屏加載效果是(shì)模拟傳送帶的(de)運動過程，我們把主體看成是(shì)受力方，傳送帶看成是(shì)施力方來(lái)進行分析。整個(gè)運動過程分爲(wéi / wèi)三種狀态，啓動态、中間态、收尾态，根據牛頓第二定律得到(dào)物體分别作勻加速、勻速和(hé / huò)勻減速直線運動。

　　根據之(zhī)前的(de)分析，我們可以(yǐ)繪制出(chū)物體運動的(de)速度-時(shí)間曲線和(hé / huò)位移-時(shí)間曲線，大(dà)家可以(yǐ)看到(dào)下面這(zhè)條曲線就(jiù)是(shì)由上(shàng)面這(zhè)條曲線積分得到(dào)的(de)，那麽問題來(lái)了(le／liǎo)！爲(wéi / wèi)什麽動效設計要(yào / yāo)畫出(chū)這(zhè)樣的(de)運動曲線呢？

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

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

　　動效設計方案

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

　　最後總結一(yī / yì ／yí)下動效設計的(de)工作流程，通過對項目需求和(hé / huò)架構的(de)綜合分析找到(dào)動效的(de)切入點，提煉發散出(chū)一(yī / yì ／yí)個(gè)關鍵動作，結合前端的(de)實現框架，确定流程邏輯和(hé / huò)運動，反複實踐檢驗得到(dào)最優方案，别忘了(le／liǎo)爲(wéi / wèi)用戶設置一(yī / yì ／yí)個(gè)驚喜，就(jiù)大(dà)功告成了(le／liǎo)！