中午做了幾個緊急的BUG Fix，已經支持火狐，和Css Hack，請大家放心大膽的用吧
本周原本要接着KitJs的高級事件繼續寫下去的，不過鼠標手勢還有一些技術問題需要解決，暫不放出。本周我們先來說說KitJs的Animation這個類。
demo地址：http://xueduany.github.com/KitJs/KitJs/demo/Animation/demo.html
KitJs官網：http://xueduany.github.com/KitJs
DOC地址：http://xueduany.github.com/jsdoc/out/$Kit.Animation.html
源代碼：https://github.com/xueduany/KitJs
（一）為什么要單獨搞一個animation類？
說實話，我用了mooltools，也用了jQuery等很多Css動畫類，但是感覺用的不爽，太復雜，主要集中在一下方面
1. 動畫效果的timeout基本是針對單個dom node，內部實現也就是一個interval控制一個節點。
2. 動畫串聯方式不自由，基本上，他會讓你把一些需要實現的動畫，放在一個什么隊列，然后依次執行，要想在隊列中間阻塞火車插入一段匿名方法不太方便
3. 不支持Css3屬性，比如-webkit-tranform，3D旋轉等等
*4. 有的類庫居然還不支持顏色漸變。。。這么簡單的東西。。。
（二）KitJs Animation的優點
1. 多node，一起動，無需設置起點狀態，只需要設置終點狀態，即可實現，兄弟們從四面八風沖一點集中的效果。
2. 動畫串聯非常方便，直接通過匿名函數鏈的方式，鏈接任意匿名函數，隨便你做什么都行
3. 支持Css3屬性，支持-webkit-transform，支持3D旋轉，支持顏色漸變
4. 支持滾動條scrollTop,scrollLeft
（三）Demo
先來點干貨，我們要實現一個動畫，一般需要設置的參數有
el : ".test1" 什么node需要變化，直接傳遞一個Css3 Selector神馬是最方便的了
duration: 300 動畫持續時間
要變成一個什么樣子，傳遞一個json對象是最合適的了
to : {
'background-color' : 'rgba(255,255,255,0.5)',
'color' : '#000000',
'-webkit-transform' : 'translateY(100px) translateX(100px) scale(1)'
}fx: $kit.anim.Fx.easeOutQuad 動畫函數，需要什么樣子的動畫效果就要靠他了
基本上上面三個就滿足基本要求了，可能你還需要以下參數
動畫初始狀態，也是一個css的json
from : {
'background-color' : 'rgba(0,0,0,1)',
'color' : '#ffffff',
'-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
}動畫結束了干嘛呢？弄一個匿名函數，隨便你干嘛，想干嘛就干嘛，當然你可以在匿名函數里面再加一個動畫
then : function() {
…
}
除了以上參數，還有一些，你可能基本不需要用到
timeSeg : 17,動畫間隔
…
等等，其他參數你可以再https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/anim.js看到
其實，對於一個動畫效果，來說，無非兩個最重要的事情，就是開始什么樣子，然后要變成什么樣子
我們可以簡潔的抽象為開始是一個Css狀態，然后變成另外一個Css狀態，
寫法為
$kit.anim.motion({
duration : 3000,
el : ".test1",
from : {
'background-color' : 'rgba(0,0,0,1)',
'color' : '#ffffff',
'-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
},
to : {
'background-color' : 'rgba(255,255,255,0.5)',
'color' : '#000000',
'-webkit-transform' : 'translateY(100px) translateX(100px) scale(1)'
},
then : function() {
$kit.anim.motion({
duration : 3000,
el : ".test1",
to : {
'background-color' : 'rgba(0,0,0,1)',
'color' : '#00c700',
'-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
},
then : function() {
$kit.css($kit.el('.test1')[0], {
position : 'static',
'-webkit-transform' : 'scale(1)',
'background-color': '#ccc',
color: 'inherit'
})
}
});
}
});
from表示初始的Css狀態，to表示要變化成為的Css狀態，當這段動畫結束時，執行then的匿名方法，上面代碼就是把隊列隊列用then參數鏈接起來，實現動畫隊列，很清楚明了把
（四）動畫方法和參數
DOC地址：http://xueduany.github.com/jsdoc/out/$Kit.Animation.html
依賴關系參考文檔，（kitjs符合CommonJs標准，你可以使用requireJs加載以上js）
使用方法為
$kit.anim.motion({
…
})
的方式，
參數如下
（五）額外的福利，fadeIn/fadeOut，slideDown/slideUp
另外kitjs還提供類似jQ的fade動畫和slide動畫，其中slide動畫是基於絕對定位制作的，全瀏覽器兼容，而不是jQ那種壓縮高度比的方式，給你真實的滑動的感覺
（六）終止當前動畫，或者在上一次動畫播放中，開始新的動畫
有時候，我們需要在一個動畫效果進行中的時候終止，開始新的動畫，比如fadeIn，fadeOut兩個相關的動畫，對於同一個元素當fadeOut到50%的時候，我們又點了fadeIn，這個時候就需要終止fadeOut動畫，從當前的狀態Css開始fadeIn，
當然kitjs的fadeIn，fadeOut內部已經做了這樣的處理
對於自定義的動畫怎么做的，
我們看到motion方法提供了一個timeout屬性，config.timeout，他可以直接傳入一個數字（setInterval返回的句柄是一個不重復的數字id），或者是一個string（在$kit.anim.handleMap會以string為key，保存定義的setInterval的數字句柄）
我們只要在
function a(){
$kit.anim.motion({
timeout:’asd’,
})
}
function b(){
$kit.anim.motion({
timeout:’asd’
})
}
指定一樣的timeout，既可以實現在動畫a進行時候，觸發了動畫b，會立即停止動畫a，開始動畫b
（七）動畫算法
建議直接看代碼比較方便，有注釋
source code: https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/anim.js#L307
（八） 首款支持Css Hack的動畫類
你可以使用_ * +等IE Hack，也可以使用-webkit，-moz等