javascript簡易緩動外掛程式(源碼打包)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

要求如下：
可以開始、暫停（線性、非線性tween都支援）、繼續、結束
支援多個樣式並行
最好不依賴於某個架構下運行
檔案尺寸越小越好
他找了一下現有的一些外掛程式或者庫，鮮有能滿足或者比較均衡的，我在這個要求下，寫了一個比較簡陋的動畫組件，基本滿足了這個需求。先上代碼
線上示範：http://demo.jb51.net/js/2012/animate/
打包下載：animate_jquery.rar
html部分：複製代碼代碼如下:<!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部分：複製代碼代碼如下:function animate(options){
this.from = options.from;//如果沒有from，就計算出from
this.to = options.to || {};
this.onStart = options.onStart || empty;//以下是一些回呼函數，就不採用事件機制了
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;//變化的總時間長度，單位是ms
var pending = false;//是不是已經暫停了，如果還木有開始的話，該值也是true
var timer = null;
var mixin = options.mix;
var defaultState = this.from || getState(element, this.to);//原始的資料
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);//如果有第三個參數，證明是從一個暫停開始的，那麼就設定startTime為目前時間減去暫訂時已經逝去的時間，如果只有兩個參數，那麼逝去時間就是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);
}
}

使用部分：複製代碼代碼如下: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);
}
}

上面是一個完整demo的代碼。做幾點說明：
代碼尺寸足夠小了，一共才100行，gzip後連1k都不到。
滿足了可以start、pause、resume、stop的需求，贈送了幾個回呼函數:D。
可以支援多個樣式一起變化。
採用了一個mixin變數，傳進來三個函數需要在執行動畫時的操作，getStyle、setStyle、compute，我感覺這三個確實和使用者的選擇有關係，前兩個可能和架構有關，第三個和使用者採用的變化計算方式有關，之所以傳進去四個參數，主要是和主流的tween類能適應起來，可以參考http://www.robertpenner.com/easing/和http://www.actionscript.org/resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/Page1.html。我給的例子用了tangram和jquery倆類庫，分別對應了兩個mixin對象，做一下簡單的適配，就能用了。
一些“私人”變數和函數放閉包裡了，這樣初始化一個animate的時候，對象是乾淨的，但是缺點就是佔用記憶體多了，每個執行個體都維護自己的方法。
使用的時候，可以不提供options.from，函數會根據額options.to來計算from中對應樣式的值，這很大程度上依賴於mixin提供的方法夠不夠強大，所以這一塊還是有bug 的，不過，80%的功能夠用了。麻雀雖小，五髒俱全了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More