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機房動畫樣例視頻

動畫的原理比較easy理解：在一定的時間間隔內，不斷改變顏色、大小或角度等圖形界面參數。直到終於的目標參數結果，整個過程人眼觀察起來就是個動畫的效果。

但提供一套完好的動畫框架是一項超出大部分一般人腦子的系統project，我非常喜歡閱讀《技術神秘點》的博客，他的《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類型分布在不同的箭頭跑道上，當點擊控制面板的animationbutton則開始啟動動畫，動畫過程箭頭將隨著Easing的函數的邏輯決定前進的速度，這樣多組動畫同一時候進行時刻直觀的對不同動畫效果進行比較。箭頭的顏色也隨著前進距離逐漸由白變紅，當達到終點時全然變紅。

演示樣例還借助了3D的空間新軸線，在垂直軸方向動態用曲線表示Easing函數在當前時間點的函數值，因此大家能夠直觀的體驗到Easing函數曲線的動態變化過程。同一時候曲線段的顏色也依據該時間段箭頭的前進距離由白變紅。

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

下面HT for Web的3D樣例為在Android平板上執行的效果。可勾選部分類型更easy直觀觀察詳細的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.

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