css建立優雅自然的開啟動畫

notebin發表於2016-12-12
CSS動畫

前言

Google Material Design花了很大篇幅介紹了優雅自然的動畫應該具備哪些特性。不僅僅是視覺上的觀感，還能幫助提高使用者介面的可用性，提升使用者體驗。官方文件講的很細緻，有很多典型視訊示例，可惜缺少程式碼示例。接下來，用開啟一個material surface動畫的例子，來說說本人對material motion的認識。

一個最簡單的開啟動畫，可能涉及移動和放大。在Material的世界中，斜向移動是不走直線的，運動速率是變化的，寬和高也不是同時變化的。按照Material motion的設計思想，可以列出開啟動畫應該具有的幾個特點：

  • 動畫持續時間(duration)與運動距離有關，但要在150ms-400ms之間，過快讓人感覺跟不上，過慢讓人感覺反應遲鈍，長距離運動時間長些，短距離運動時間短些。

  • 在Material世界中，運動速率曲線分為四種，對於螢幕內的運動，使用標準的貝塞爾曲線。

  • Material元素寬高的變化是不一致的，在放大過程中，寬度變大的速度大於高度，縮小過程則相反。

  • Material元素移動的路徑是凹弧線。

CSS程式碼

開啟（放大）過程中寬度比高度先達到目標值，高比寬延遲開始變化；關閉過程（縮小）中，高度比寬度先達到目標值，寬比高延遲開始變化。CodePen: http://codepen.io/huangbuyi/p…

// Open
transition: width 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            height 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35m；
            
// Close
transition: width 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            height 275ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,

移動過程中，除了水平和豎直移動，Material元素移動路徑是凹弧線。向頁面下方運動是，就像是彈珠從碗邊沿滾到碗裡，向頁面上方運動，就像彈珠從碗裡滾動碗邊沿。不過速度是不一樣的，運動速率根據Material中的標準運動曲線，曲線是加速啟動，減速停止的。CodePen:http://codepen.io/huangbuyi/p…

// 向頁面下方運動
transition: left 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms,
            top 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms;
            
// 向頁面上方運動
transition: left 305ms cubic-bezier(0.4, 0.0, 0.2, 1) 0ms,
            top 340ms cubic-bezier(0.4, 0.0, 0.2, 1) 35ms;

需要注意的是，開啟和關閉不要用同一套動畫，向上移動和向下移動也不要用同一套動畫，可以分別放在兩個類中，通過改變類名，實現不同動畫效果。最後，將兩種運動的程式碼結合在一起就能建立優雅自然的開啟動畫啦。CodePen: http://codepen.io/huangbuyi/p…

相關文章