如何寫一個通用的JavaScript效果庫！(1/2)

JavaScript的動態效果最基本的是 動態改變大小，移動位置，改變透明度，改變顏色等等。
而其他一些比較炫的效果無非是對這些最基本效果的組合和運用。

現在網上已經有很多很不錯的優秀Javascript庫或者效果庫，我們是否有必要再造輪子呢？
放眼望去，Yahoo UI, 基於Prototype的scriptaculous, Rico， JQuery, Dojo，還有很多很多。
這些庫都帶有很不錯很優秀的動態效果。我們可以直接使用。
但是對於一些中小型項目來說，只是偶爾用到一兩個特效，就沒有必要引用整個架構，要知道
這些傢伙體積都不小哦. prototype.js 50K, scripttaculous的 effects.js也有40-50k dojo,yui 更大。

在大多數情況下我們需要一個小巧獨立(300行代碼以內)，無侵入性的效果庫。.即使有現有的輪子，
我們不但要學會怎麼使用輪子，更要學會如何親手造一個輪子。
基於以上原因，我們今天來重寫一個靈活的，擴充性強的，小巧的，跨瀏覽器的動態效果庫。

考慮到prototype.js 使用者群的廣泛性，我的部分代碼引用了prototype.js,當然，我說過 ，我們要做一個獨立
的效果庫，即使在沒有prototype.js的情況下，也要讓代碼正常工作。

先做一些準備工作。下面這些代碼是任何效果庫中必不可少的，因為它負責一些類似取位置座標，
設定，擷取element的透明度等這些基礎工作。

代碼：

複製代碼 代碼如下:/*
這個函數的代碼來自 Prototype.js http://prototype.conio.net/
如果頁面引用了prototype.js ,則可以刪除下面這個函數,
當然,即使不刪除也沒關係,因為作了簡單的相容性判斷
*/
(function(){
if (!("Prototype" in window)){
Prototype={emptyFunction:function(){}};
Class ={
create: function(){return function(){this.initialize.apply(this, arguments)}}
};
$ = function(element){
return typeof(element)=="string"?document.getElementById(element):element
};
$A= function(arrLike){
for(var i=0,ret=[];i<arrLike.length;i++) ret[i]=arrLike[i];
return ret
};

Number.prototype.toColorPart =function(){return String("00"+this.toString(16)).slice(-2)};
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function(){return __method.apply(object, args.concat($A(arguments)))}
}

Position={
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
}
}
})()

/*
1.讀取/設定 透明度,
2.如果只傳了一個參數element,則返回 element的透明度 (0<value<1)
3.如果傳了兩個參數 element和value 則把element的透明度設定為value value範圍 0-1
*/
function Opacity(element,value){
// by Go_Rush(阿舜) from http://ashun.cnblogs.com/
var ret;
if (value===undefined){ //讀取
if (!/msie/i.test(navigator.userAgent))
if (ret=element.style.opacity) return parseFloat(ret);
try{return element.filters.item('alpha').opacity/100}catch(x){return 1.0}
}else{ //設定
value=Math.min(Math.max(value,0.00001),0.999999) //這句修複一些非ie瀏覽器opacity不能設定為1的bug
if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")"
return element.style.opacity=value
}
}

那麼怎麼設計這個Effect效果庫呢。
首先，它的入口應該簡潔。
1.一個是要使用效果的元素 element
2.另一個是將要使用什麼效果 options
options應該是擴充性強的，方便使用者使用的。我們把它設計成哈稀結構。
比如 options={x:100,y:100} 表示 將element移動到座標 100,100
options={w:200,h:200} 表示將element的大小改變為 width=200,height=200
他們可以重疊，也可以確省 比如 options={h:20,y:20} 這表示將element移動到 top=20的位置，而且在移動的過程中讓他的大小改變為 height=20 ，同時，原來的left座標和寬度都不發生改變，這是不是在做QQ的滑動效果呢？
還有控制效果的幾個關鍵因素 duration(整個效果的時間),delay(延遲幾秒才開始效果),fps(頻率快慢) 都通過options傳進來

複製代碼 代碼如下: Effect =Class.create();
Effect.Fn =new Object();
Effect.Init =new Object();
// By Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.prototype={
initialize: function(element,options) {
this.element = $(element);
this.options = options || {};
this.duration = (this.options.duration || 2) * 1000; //效果執行時間
this.fps = this.options.fps || 40; //頻率
//當前步長，註： 這個變數是遞減的，當它0的時候意味著整個效果結束
this.steps = Math.floor(this.duration/this.fps);
this.maxSteps = this.steps; //整個效果的步長
this.setting = new Object();
this.timer = null;

if (this.options.delay){ // 延時處理
var _this=this;
setTimeout(function(){
_this.setup(_this);
(_this.options.onStart || Prototype.emptyFunction)(_this);
_this.run();
}, _this.options.delay*1000);
}else{
this.setup(this);
(this.options.onStart || Prototype.emptyFunction)(this);
this.run();
}
},
run: function() {
if (this.isFinished()) return (this.options.onComplete || Prototype.emptyFunction)(this);
if (this.timer) clearTimeout(this.timer);
this.duration -= this.fps;
this.steps--;
var pos=1-this.steps/this.maxSteps ; //總進度的百分比
this.loop(this,pos);
(this.options.onUpdate || Prototype.emptyFunction)(this,pos);
this.timer = setTimeout(this.run.bind(this), this.fps);
},
isFinished: function() {
return this.steps <= 0;
},
setup:function(effect){ //初始化設定所有效果單元
for(var key in Effect.Init){
if (typeof(Effect.Init[key])!="function") continue;
try{Effect.Init[key](this)}catch(x){}
}
},
loop:function(effect,pos){ //執行所有效果單元
for(var key in Effect.Fn){
if (typeof(Effect.Fn[key])!="function") continue;
try{Effect.Fn[key](effect,pos)}catch(x){}
}
}
}

當動態效果改變的時候，比如淡出，我們讓一個element慢慢的變淡變小，並消失。
在不用效果庫的情況下 只用 element.style.display="none" 就做到了。
用效果庫後，element.style 的 透明度 opacity, 尺寸 width,height 甚至位置 left,top都發生了改變。
直到 element的大小改變為 0或者opactiy為0的時候他才會消失 display="none"
那麼，當下次再讓他出現的時候，怎麼恢複他的原始資訊呢。比如 width.height,opacity等。

在上面的代碼中 我們用 effect.setting 儲存效果發生前的所有element資訊.

注意以上三個自訂函數 onStart,onUpdate,onComplete 他們都是通過 options傳進來的調用者自訂函數。
分別在效果發生以前，效果發生時，效果發生完畢後執行。傳入的參數可以查閱effect的所有對象。

看到這裡，細心的看官可能注意到，這個效果庫實際上什麼效果都沒有做，他只是搭了一個空架子。
Effect.Init 給我們留了一個空介面供 setup方法調用，Effect.Fn也是一個空介面供loop方法調用。
下面我們要做的是擴充 Effect.Init和 Effect.Fn 來充實效果庫。

先來一個大家最熟悉的 淡入淡出
Effect.Init 裡面的所有成員函數都會被 effect.setup 執行， 這個執行動作在效果開始之前，因此這裡
適合做一些初始化的動作。 比如把一些初始資訊儲存到 effect.setting裡面供以後使用。

Effect.Fn 裡面的所有成員函數都會被 effect.loop 執行， 這個執行動作在效果運行中，因此這裡
就要放核心效果代碼，比如計算，改變效果增量等等。

複製代碼 代碼如下: if (effect.options.opacity===undefined) return;
effect.setting.opacity=Opacity(effect.element);
}

Effect.Fn.opacity=function(effect,pos){
if (effect.options.opacity===undefined) return;
Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);
}

下面貼出可調試代碼(空效果庫和淡入淺出外掛程式)：（可以拷貝到一個html運行，測試） <button onclick="javascript:foo1()">執行foo1</button><br /><button onclick="javascript:foo2()">執行foo2(延遲)</button><br /><button onclick="javascript:foo3()">執行foo3(5秒)</button><br /><button onclick="javascript:foo4()">執行foo4(自訂函數)</button><br /><button onclick="javascript:foo5()">執行foo5(先變淡後變深)</button> </p><p>每次調用效果後點下面的恢複按鈕</p><p><button onclick="javascript:foo()">恢 複</button> </p> <br /> Go_Rush(阿舜) @ http://ashun.cnblogs.com/ </p><p> Go_Rush(阿舜) @ http://ashun.cnblogs.com/ </p><p> <p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

這一頁挺長的，明天新開一個隨筆，再把擴充的外掛程式 size, move,zoom,color等等全部貼出來，還有一些示範代碼