diff --git a/Readme.md b/Readme.md index 13ce8dd..f29c7a5 100644 --- a/Readme.md +++ b/Readme.md @@ -17,6 +17,7 @@ var button = document.querySelector('button'); var tween = Tween({ rotate: 0, opacity: 0 }) .ease('out-bounce') .to({ rotate: 360, opacity: 1 }) + .delay(200) .duration(800); tween.update(function(o){ @@ -56,6 +57,10 @@ animate(); Set duration to `ms` [500]. +### Tween#delay(ms:Number) + + Set delay to `ms` [0]. + ### Tween#ease(fn:String|Function) Set easing function to `fn`. diff --git a/examples/array.html b/examples/array.html index e304f6e..c0ff6e1 100644 --- a/examples/array.html +++ b/examples/array.html @@ -45,4 +45,4 @@ } animate(); - \ No newline at end of file + diff --git a/examples/circle.html b/examples/circle.html index 64e50e5..e563437 100644 --- a/examples/circle.html +++ b/examples/circle.html @@ -20,7 +20,8 @@ var tween = Tween({ alpha: 0, border: 1, radius: 1 }) .ease('out-bounce') .to({ alpha: 1, border: 15, radius: 150 }) - .duration(1000); + .duration(1000) + .delay(1000) tween.update(function(o){ canvas.width = canvas.width; diff --git a/examples/delay.html b/examples/delay.html new file mode 100644 index 0000000..79b71b5 --- /dev/null +++ b/examples/delay.html @@ -0,0 +1,43 @@ + + + + + + + diff --git a/index.js b/index.js index e087722..1d7dcaf 100644 --- a/index.js +++ b/index.js @@ -24,6 +24,7 @@ function Tween(obj) { this._from = obj; this.ease('linear'); this.duration(500); + this.delay(0); } /** @@ -75,6 +76,19 @@ Tween.prototype.duration = function(ms){ return this; }; +/** + * Set delay to `ms` [0]. + * + * @param {Number} ms + * @return {Tween} self + * @api public + */ + +Tween.prototype.delay = function(ms){ + this._delay = ms; + return this; +}; + /** * Set easing function to `fn`. * @@ -121,7 +135,10 @@ Tween.prototype.step = function(){ var duration = this._duration; var now = Date.now(); var delta = now - this._start; - var done = delta >= duration; + var done = delta >= duration + this._delay; + var waiting = delta < this._delay; + + if (waiting) return; // complete if (done) { @@ -137,7 +154,7 @@ Tween.prototype.step = function(){ var to = this._to; var curr = this._curr; var fn = this._ease; - var p = (now - this._start) / duration; + var p = (now - this._start - this._delay) / duration; var n = fn(p); // array