快捷導(dǎo)航

javascript簡(jiǎn)易緩動(dòng)插件(源碼打包)

更新時(shí)間：2012年02月16日 19:46:13 作者：

最近，同事在做一個(gè)項(xiàng)目的時(shí)候，有個(gè)需求，需要一款動(dòng)畫庫(kù)來(lái)支持

要求如下：
可以開(kāi)始、暫停（線性、非線性tween都支持）、繼續(xù)、結(jié)束
支持多個(gè)樣式并行
最好不依賴于某個(gè)框架下運(yùn)行
文件尺寸越小越好
他找了一下現(xiàn)有的一些插件或者庫(kù)，鮮有能滿足或者比較均衡的，我在這個(gè)要求下，寫了一個(gè)比較簡(jiǎn)陋的動(dòng)畫組件，基本滿足了這個(gè)需求。先上代碼
在線演示：http://demo.jb51.net/js/2012/animate/
打包下載：animate_jquery.rar
html部分：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>animate</title> 
<script type="text/javascript" src="tangram-1.5.0.core.js"></script> 
<script type="text/javascript" src="jquery.min.js"></script> 
<style> 
html,body,ul,li{padding:0;margin:0;} 
#anim{width:50px;height:50px;background:red;position:absolute; top:30px;left:0;} 
</style> 
</head> 
<body> 
<div> 
<input type="button" value="start" onclick="an.start()" /> 
<input type="button" value="pause" onclick="an.pause()" /> 
<input type="button" value="resume" onclick="an.resume()" /> 
<input type="button" value="stop" onclick="an.stop()" /> 
<a target="_self" id="demolink" href="animate.html?demo=1" />auto start,pasue,then resume</a> 
</div> 
<div id="anim"></div> 
</body></html> 

animate部分：

復(fù)制代碼代碼如下:

 
function animate(options){ 
this.from = options.from;//如果沒(méi)有from，就計(jì)算出from 
this.to = options.to || {}; 
this.onStart = options.onStart || empty;//以下是一些回調(diào)函數(shù)，就不采用事件機(jī)制了 
this.onStop = options.onStop || empty; 
this.onAnimate = options.onAnimate || empty; 
this.onContinue = options.onContinue || empty; 
this.onPause = options.onPause || empty; 
var element = options.element; 
var duration = options.duration || 300;//變化的總時(shí)長(zhǎng)，單位是ms 
var pending = false;//是不是已經(jīng)暫停了，如果還木有開(kāi)始的話，該值也是true 
var timer = null; 
var mixin = options.mix; 
var defaultState = this.from || getState(element, this.to);//原始的數(shù)據(jù) 
var thiz = this; 
//獲取最初始的樣式 
function getState(ele, targetStyles){ 
var obj = {}; 
var i = 0; 
for (var p in targetStyles) 
{ 
i++; 
obj[p] = parseFloat(mixin.getStyle(ele, p)); 
} 
if(i == 0){ 
return null; 
} 
return obj; 
} 
function empty(){} 
function animate(from, to, elapse){ 
var startTime = (new Date).getTime() + (elapse ? - elapse : 0);//如果有第三個(gè)參數(shù)，證明是從一個(gè)暫停開(kāi)始的，那么就設(shè)置startTime為當(dāng)前時(shí)間減去暫定時(shí)已經(jīng)逝去的時(shí)間，如果只有兩個(gè)參數(shù)，那么逝去時(shí)間就是0 
timer = setInterval(function(){ 
var endTime = (new Date).getTime(); 
if(endTime - startTime < duration){ 
thiz.onAnimate(); 
currentElapse = endTime - startTime; 
for(var p in from){ 
if(from.hasOwnProperty(p)){ 
var currentPropertyStyle = mixin.compute(currentElapse, from[p], to[p]-from[p], duration); 
mixin.setStyle(element, p, currentPropertyStyle); 
} 
} 
} 
else{ 
thiz.stop(thiz.to); 
} 
}, 16); 
} 
this.start = function(){ 
if(pending){ 
this.resume(); 
} 
else{ 
this.onStart(); 
animate(defaultState, this.to); 
} 
} 
this.stop = function(){ 
clearInterval(timer); 
var styles = this.to; 
for(var p in styles){ 
if(styles.hasOwnProperty(p)){ 
mixin.setStyle(element, p, styles[p]); 
} 
} 
this.onStop(); 
} 
this.pause = function(){ 
clearInterval(timer); 
pending = true; 
this.onPause(); 
} 
this.resume = function(){ 
pending = false; 
this.onContinue(); 
animate(defaultState, this.to, currentElapse); 
} 
} 

使用部分：

復(fù)制代碼代碼如下:

 
var mixinT = { 
getStyle:baidu.dom.getStyle, 
setStyle:baidu.dom.setStyle, 
compute:function(t, b, c, d){ 
//return t*c/d + b; 
if (t==0) return b; 
if (t==d) return b+c; 
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
} 
}; 
var mixinJQ = { 
getStyle:function(ele, styleName){ 
return $(ele).css(styleName); 
}, 
setStyle:function(ele, styleName, styleValue){ 
$(ele).css(styleName, styleValue); 
}, 
compute:function(t, b, c, d){ 
return b+ t*c/d; 
} 
}; 
var an = new animate({ 
element:document.getElementById('anim'), 
//from:{'width':100, 'height':100, left:0, top:30}, 
to:{left:500}, 
mix:mixinT, 
duration:2000 
}); 
if(/demo=1/.test(location.search)){ 
var demolink = baidu.g('demolink'); 
demolink.href= 'animate.html'; 
demolink.innerHTML = 'back'; 
an.start(); 
setTimeout(function(){ 
an.pause(); 
resume(); 
}, 1200); 
function resume(){ 
setTimeout(function(){an.resume()}, 1000); 
} 
} 

上面是一個(gè)完整demo的代碼。做幾點(diǎn)說(shuō)明：
代碼尺寸足夠小了，一共才100行，gzip后連1k都不到。
滿足了可以start、pause、resume、stop的需求，贈(zèng)送了幾個(gè)回調(diào)函數(shù):D。
可以支持多個(gè)樣式一起變化。
采用了一個(gè)mixin變量，傳進(jìn)來(lái)三個(gè)函數(shù)需要在執(zhí)行動(dòng)畫時(shí)的操作，getStyle、setStyle、compute，我感覺(jué)這三個(gè)確實(shí)和用戶的選擇有關(guān)系，前兩個(gè)可能和框架有關(guān)，第三個(gè)和用戶采用的變化計(jì)算方式有關(guān)，之所以傳進(jìn)去四個(gè)參數(shù)，主要是和主流的tween類能適應(yīng)起來(lái)，可以參考http://www.robertpenner.com/easing/和http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html。我給的例子用了tangram和jquery倆類庫(kù)，分別對(duì)應(yīng)了兩個(gè)mixin對(duì)象，做一下簡(jiǎn)單的適配，就能用了。
一些“私有”變量和函數(shù)放閉包里了，這樣初始化一個(gè)animate的時(shí)候，對(duì)象是干凈的，但是缺點(diǎn)就是占用內(nèi)存多了，每個(gè)實(shí)例都維護(hù)自己的方法。
使用的時(shí)候，可以不提供options.from，函數(shù)會(huì)根據(jù)額options.to來(lái)計(jì)算from中對(duì)應(yīng)樣式的值，這很大程度上依賴于mixin提供的方法夠不夠強(qiáng)大，所以這一塊還是有bug 的，不過(guò)，80%的功能夠用了。麻雀雖小，五臟俱全了。

您可能感興趣的文章: