相關新聞
- 還沒升級成響應式網頁設計？ 01-01
- 助力清華同方新媒體—記8月31日鋒云科技成功中標清華同方官網響應式網站升級項目！ 01-01
- 為什么有的網站建設的“很爛” 卻能排在首頁？ 01-01
- 企業網站建設如何突出網站價值 01-01
類目區域，共分為三級菜單，我們用次級物體運動來表達這三級菜單之間的關系，附屬性質的次級物體運動是伴隨著主要物體運動產生的，次級運動相較主要物體運 動有一定的延遲，所以我們在類目區域也是通過運動的時間差帶來邏輯上的關系，一級菜單牽引出二級菜單，二級菜單牽引出三級菜單。
banner的視差滾動效果以及樓層的分屏加載效果是模擬傳送帶的運動過程，我們把主體看成是受力方，傳送帶看成是施力方來進行分析。整個運動過程分為三種狀態，啟動態、中間態、收尾態，根據牛頓第二定律得到物體分別作勻加速、勻速和勻減速直線運動。
根據之前的分析，我們可以繪制出物體運動的速度-時間曲線和位移-時間曲線，大家可以看到下面這條曲線就是由上面這條曲線積分得到的，那么問題來了！為什么動效設計要畫出這樣的運動曲線呢？
前端同學可以運用曲線進行運動定義，CSS屬性中的transition和animation可指定緩動函數，但不支持全部函數，可通過貝塞爾曲線的繪制 達到自定義的運動效果，固定貝塞爾曲線中頭、尾兩個點，通過這兩個點引申出的錨點來確定曲線的弧度，任何運動曲線都可以拆解為一段段的貝塞爾曲線來進行定 義。 貝塞爾曲線繪制函數：http://cubic-bezier.com/#.63,0,1,1
通過CSS為運動曲線專門設置的VIP屬性來確定兩個錨點位置，流暢的動效就搞定了
這里再給大家提供一個更加省事兒的辦法，SCSS，也就是CSS的進階版本，還有Javascript可以直接調用緩動函數庫，大家或許會對下面這種復雜扭曲的函數有疑惑，其實這些是具有反饋效果的運動曲線。根據我們之前的分析，由于1688首頁采用的是內容靠前的設計策略以及簡約的視覺風格，所以我們的動效動作一定是“穩、準、狠”，絕不拖泥帶水，也絕不喧賓奪主，所以這樣比較Q彈的動作是我們極力避免的。其實這些曲線更適合應用在無線端，由于在無線端用戶直接使用手指來進行操作，當我們需要表達區塊元素的彈性、紙質或者是卡片的材料隱喻時，用反饋效果來表達材料和重力是比較恰當的。 緩動函數速查表：http://easings.net/zh-cn#
最終我們會得到一個包含時間點、關鍵幀、觸發條件、運動過程和空間幅度的完整時間軸，清晰的顯示出頁面區塊元素在每一個時間點的樣式和樣式之間的過度，有 了這樣的規范輸出，麻麻再也不用擔心我的動效還原了。具體動效請線上查看：http://www.1688.com/ 其實今天文中提到的技術方案是有一個保質期的，由于技術的迭代迅猛，也不知道這個保質期能夠持續多久，但是按照時間軸和關鍵幀的動效設計思路是不會過期 的，迪士尼從白雪公主時期建立的動畫設計精髓到了今天的超能陸戰隊上依然成立，大白的每一個動作設計從本質上來說仍舊是時間點和空間幅度，所以說，作為動 效設計師，只要謹記這一點，一個好的動效方案就成功了一半，另外的一半就是結合業務和用戶的思考了。
最后總結一下動效設計的工作流程，通過對項目需求和架構的綜合分析找到動效的切入點，提煉發散出一個關鍵動作，結合前端的實現框架，確定流程邏輯和運動，反復實踐檢驗得到最優方案，別忘了為用戶設置一個驚喜，就大功告成了！
