|
|
而其他一些比較炫的效果無非是對這些最基本效果的組合和運用。
現在網上已經有很多很不錯的優秀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運行，測試）
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
這一頁挺長的，明天新開一個隨筆，再把擴展的插件 size, move,zoom,color等等全部貼出來，還有一些示范代碼
JavaScript技術：如何寫一個通用的JavaScript效果庫！(1/2)，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
