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.