中文前端UI架構Kit（五）支援Css全屬性/Css Hack/Css3屬性/色彩坡形的Javascript動畫，相比JQuery和Mooltools，功能更為強大，這不是標題黨!

中午做了幾個緊急的BUG Fix，已經支援Firefox，和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等