透過WebGL 3D看動畫Easing函數本質

50年前的這個月誕生了BASIC這門計算機語言，回想起本身喜歡上圖形界面這行，還得歸功於當年在win98下用QBASIC照葫蘆畫瓢敲了一段繪製奧運五環的代碼，當帶色彩的奧運五環呈如今本身面前時我已知道本身這輩子要走的路了。在這個忘本逐新的年代不見多少媒體說起這影響了幾代人的BASIC語言的50年慶了。

現在消費者對用戶體驗的高要求，以遠不能以靜態平面圖形打動人心，動畫已經是衡量前端產品用戶體驗不可忽視的重要因素，最近Facebook開源的Pop動畫框架已發了iOS業界極大的關注，其實Apple早在Cocoa和Cocoa Touch框架內置了動畫框架Core Animation，HTML5的CSS3也內置了動畫機制，不知是本身腦子很差似仍是HTML5接口提供的不夠友好，久不用總會忘只能考寫了個小例子幫本身記憶。

基於HT for Web的自動佈局動畫例子視頻

 

基於HT for Web的3D機房動畫例子視頻

動畫的原理比較容易理解：在必定的時間間隔內，不斷改變顏色、大小或角度等圖形界面參數，直到最終的目標參數結果，整個過程人眼觀察起來就是個動畫的效果。但提供一套完善的動畫框架是一項超出大部分通常人腦子的系統工程，我很喜歡閱讀《技術奇異點》的博客，他的《Core Animation 初探》對OS X的Core Animation進行了深刻的思考。

一套好的動畫框架是模型接口、用戶體驗和運行性能等多方面極可貴到平衡的挑戰，即便是現在各類GUI平臺提供的主流動畫框架這麼多年了依然問題很多，不是具體場景的性能問題，就是多組件同時動畫是莫名其妙各類bug，加上前面提到的我腦子很差使，實在記不住各類平臺提供五發八門接口，所以我喜歡本身經過Model來達到控制View的動畫效果，這樣在動畫過程改變哪些屬性，改變的每一個動畫幀改變的幅度，動畫以前以後的各類事件處理，多動畫的並行仍是串行處理一切均可以在本身的掌控之中。

最先接觸到Easing概念是學Flash/Flex時接觸到的這裏demo，這個demo第一次給我對Easing直觀的感覺，現在基於HTML5的能夠參考 http://easings.net/，Easing函數的做用在於經過定義不一樣曲線的數據公式方式，來描述每一幀回調時須要改變圖形參數屬性的幅度，從而達到均勻、先快後慢、先慢後快，甚至先超出起始值和結束值再慢慢恢復的各類動畫特效，現在有不少工具提供了可視化編輯Easing曲線函數的功能，待會介紹的例子將會枚舉一堆經常使用的Easing函數供你們參考應用，先上張圖和視頻開門見山讓你們體驗下基於WebGL的3D下，如何更直觀的展現不一樣Easing動畫效果：

該例子近20種動畫Easing類型分佈在不一樣的箭頭跑道上，當點擊控制面板的animation按鈕則開始啓動動畫，動畫過程箭頭將隨着Easing的函數的邏輯決定前進的速度，這樣多組動畫同時進行時刻直觀的對不一樣動畫效果進行比較。箭頭的顏色也隨着前進距離逐漸由白變紅，當達到終點時徹底變紅。

示例還藉助了3D的空間新軸線，在垂直軸方向動態用曲線表示Easing函數在當前時間點的函數值，所以你們能夠直觀的體驗到Easing函數曲線的動態變化過程，同時曲線段的顏色也根據該時間段箭頭的前進距離由白變紅。

右側控制面板上端是HT的TableView表格組件，經過表格的CheckMode可勾選須要顯示的Easing函數類型，可點擊表頭所有選中或者所有取消，或逐行控制具體特效的是否可見，下端HT拉條組件的frames爲幀數，表明整個過程要跑多少幀，interval表明每一幀的時間間隔，增長frames會讓曲線更均勻，增減interval可控制動畫的快慢程度。

如下HT for Web的3D例子爲在Android平板上運行的效果，可勾選部分類型更容易直觀觀察具體的Easing函數運行效果：

整個例子的運行效果給我感受就像這個社會各式各樣的人生路，你們都逃不過出生和死亡，你們的起點是同樣的，終點的死亡也是誰也躲不過的，但不一樣人能夠走出不一樣的人生曲線，easeNone:function(t){return t}這條是均勻的直線，給我感受就是公務員之路，沒有大起大落，每一年都會收入更好，但快不來只能慢慢熬；elasticOut是最順利的年少就達到事業巔峯，固然後續也沒啥追求一路高位穩定等死；elasticOut是大器晚成類型，一路平平毫無建樹，終老以前也有幸快速達到了目的地；其餘波折動盪的類型如創業人生，天天你都不知道明天會發生什麼，你可能一直坐着過山車，時而在低谷時而在頂峯，不過怎麼樣只要堅持繼續前進人人都會達到理想的終點：

Everything will be okay in the end. If it’s not okay, it’s not the end.