(function() { | |
/* | |
* addCommand jQuery Plugin version 0.3 | |
* http://lab.hisasann.com/addCommand/ | |
* | |
* Copyright (c) 2009 hisasann http://hisasann.com/ | |
* Dual licensed under the MIT and GPL licenses. | |
* | |
* addCommandはProgression(http://progression.jp/ja/)のaddCommandに影響を受けて制作しました。 | |
* 複数のアニメーションを逐次実行したい場合は、jQueryのanimateではネストが深くなる場合があります。 | |
* addCommandにDoTweenerクラスを渡すことにより、1つずつanimationが実行されるので、簡潔に記述が可能になります。 | |
* ストーリーやシーンの制作に役立てていただけたら幸いです。 | |
*/ | |
/* Usage | |
*/ | |
/* Propでcssを指定してからDoTweenerで1つずつanimation | |
* | |
* $.addCommand.define(); | |
* addCommand( | |
* Prop($("#hoge"), { top: "0px" }), | |
* Wait(1), | |
* DoTweener($("#hoge"), { | |
* top: "100px" | |
* }, 1000, "easeInOutCirc", function() { | |
* }, 100 | |
* ), | |
* Wait(1), | |
* DoTweener($("#hoge"), { | |
* top: "200px" | |
* }, 1000, "easeInOutCirc", function() { | |
* }, 100 | |
* ) | |
* ); | |
*/ | |
/* 一気に2つのanimationを実行して終わったらalert表示 | |
* | |
* $.addCommand.define(); | |
* addCommand( | |
* [ | |
* DoTweener($("#hoge1"), { | |
* top: "100px" | |
* }, 1000, "easeInOutCirc", function() { | |
* }, 100 | |
* ), | |
* DoTweener($("#hoge2"), { | |
* top: "200px" | |
* }, 1000, "easeInOutCirc", function() { | |
* }, 100 | |
* ) | |
* ], | |
* function () { | |
* alert("Done!!"); | |
* } | |
* ); | |
*/ | |
$.addCommand = function() { | |
new addCommand(arguments); | |
return this; | |
} | |
function addCommand(queue) { | |
var _this = this; | |
this.queue = []; | |
$.each(queue, function(index, obj) { | |
_this.queue.push(obj); | |
}); | |
this.init(queue); | |
}; | |
addCommand.prototype = { | |
queue: [], | |
isDone: false, | |
arg: null, | |
init: function(queue) { | |
var _this = this; | |
var i = 0, | |
len = this.queue.length, | |
com; | |
this.isDone = true; | |
(function() { | |
if (i >= len) { return } | |
var wait = 0; | |
if (_this.isDone) { | |
_this.isDone = false; | |
com = _this.queue[i++]; | |
wait = _this.doCommand(com); | |
} | |
setTimeout(arguments.callee, wait || 10); | |
})(); | |
}, | |
doCommand: function(com) { | |
var _this = this; | |
if (com instanceof Wait) { | |
this.isDone = true; | |
return com.timer * 1000; | |
} else if (com instanceof Prop) { | |
this.isDone = true; | |
$(com.selector).css(com.prop); | |
} else if (com instanceof DoTweener) { | |
setTimeout(function() { | |
$(com.selector).animate(com.prop, com.duration, com.easing, function() { | |
_this.isDone = true; | |
(com.callback || function() {}).apply(this, arguments); | |
}); | |
}, com.delay || 0); | |
} else if(com instanceof Function) { | |
this.isDone = true; | |
this.arg = com(this.arg); | |
} else if (com instanceof Array) { | |
this.doCommandWith(com); | |
} | |
}, | |
doCommandWith: function(array) { | |
var i = 0, | |
len = array.length, | |
com = [], | |
allcount = len, | |
targetcount = 0, | |
_this = this; | |
(function() { | |
if (i >= len) { return } | |
com = array[i++]; | |
if (com instanceof Prop) { | |
targetcount++; | |
$(com.selector).css(com.prop); | |
} else if (com instanceof DoTweener) { | |
setTimeout(function() { | |
$(com.selector).animate(com.prop, com.duration, com.easing, function() { | |
targetcount++; | |
(com.callback || function() {}).apply(this, arguments); | |
}); | |
}, com.delay || 0); | |
} else if (com instanceof Function) { | |
targetcount++; | |
this.arg = com(this.arg); | |
} | |
setTimeout(arguments.callee, 10); | |
})(); | |
var interval = setInterval(function (){ | |
if(allcount <= targetcount){ | |
clearInterval(interval); | |
_this.isDone = true; | |
} | |
}, 100); | |
} | |
} | |
$.addCommand.Wait = function(timer) { | |
return new Wait(timer); | |
} | |
var Wait = function(timer) { | |
this.timer = timer; | |
} | |
Wait.prototype = { | |
timer: null | |
} | |
$.addCommand.Prop = function(selector, prop) { | |
return new Prop(selector, prop); | |
} | |
var Prop = function(selector, prop) { | |
this.selector = selector; | |
this.prop = prop; | |
} | |
Prop.prototype = { | |
selector: null, | |
prop: null | |
} | |
$.addCommand.DoTweener = function(selector, prop, duration, easing, callback, delay) { | |
return new DoTweener(selector, prop, duration, easing, callback, delay); | |
} | |
var DoTweener = function(selector, prop, duration, easing, callback, delay) { | |
this.selector = selector; | |
this.prop = prop; | |
this.duration = duration; | |
this.easing = easing; | |
this.callback = callback; | |
this.delay = delay; | |
}; | |
DoTweener.prototype = { | |
selector: null, | |
prop: null, | |
duration: null, | |
easing: null, | |
callback: null, | |
delay: null | |
} | |
$.addCommand.define = function() { | |
if (window.addCommand) { return; } | |
window.addCommand = $.addCommand; | |
window.Wait = $.addCommand.Wait; | |
window.Prop = $.addCommand.Prop; | |
window.DoTweener = $.addCommand.DoTweener; | |
} | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment