Permalink
Browse files

add array tweening support

  • Loading branch information...
1 parent d60ff65 commit 4e08166b92b9d575f7091efb26ce864d690b9aa2 @tj tj committed Nov 11, 2012
Showing with 69 additions and 7 deletions.
  1. +2 −2 Readme.md
  2. +2 −1 component.json
  3. +48 −0 examples/array.html
  4. +17 −4 index.js
View
@@ -38,15 +38,15 @@ animate();
## API
-### Tween(obj)
+### Tween(obj:Object|Array)
Initialize a new `Tween` with `obj`.
### Tween#reset()
Reset the tween.
-### Tween#to(obj:Object)
+### Tween#to(obj:Object|Array)
Tween to `obj` and reset internal state.
View
@@ -9,7 +9,8 @@
"component/ease": "*"
},
"development": {
- "component/raf": "*"
+ "component/raf": "*",
+ "component/autoscale-canvas": "*"
},
"license": "MIT",
"scripts": [
View
@@ -0,0 +1,48 @@
+
+<style>
+ canvas {
+ border: 1px solid #eee;
+ }
+</style>
+
+<script src="../build/build.js"></script>
+
+<canvas width=1000 height=500></canvas>
+
+<script>
+ var Tween = require('tween');
+ var raf = require('component-raf');
+ var canvas = document.querySelector('canvas');
+ var ctx = canvas.getContext('2d');
+ var h = 500;
+
+ function random(n, f) {
+ var arr = [];
+ while (n--) arr.push(Math.random() * f);
+ return arr;
+ }
+
+ var tween = Tween(random(1000, 50))
+ .ease('out-bounce')
+ .to(random(1000, 400))
+ .duration(800);
+
+ tween.update(function(a){
+ canvas.width = canvas.width;
+ ctx.fillStyle = '#0070ff';
+ for (var i = 0; i < a.length; i++) {
+ ctx.fillRect(i, h - a[i], 1, a[i]);
+ }
+ });
+
+ tween.on('end', function(){
+ animate = function(){};
+ });
+
+ function animate() {
+ raf(animate);
+ tween.update();
+ }
+
+ animate();
+</script>
View
@@ -15,7 +15,7 @@ module.exports = Tween;
/**
* Initialize a new `Tween` with `obj`.
*
- * @param {Object} obj
+ * @param {Object|Array} obj
* @api public
*/
@@ -39,6 +39,7 @@ Emitter(Tween.prototype);
*/
Tween.prototype.reset = function(){
+ this.isArray = Array.isArray(this._from);
this._curr = clone(this._from);
this._done = false;
this._start = Date.now();
@@ -50,7 +51,7 @@ Tween.prototype.reset = function(){
*
* tween.to({ x: 50, y: 100 })
*
- * @param {Object} obj
+ * @param {Object|Array} obj
* @return {Tween} self
* @api public
*/
@@ -125,6 +126,17 @@ Tween.prototype.step = function(){
var p = (now - this._start) / duration;
var n = fn(p);
+ // array
+ if (this.isArray) {
+ for (var i = 0; i < from.length; ++i) {
+ curr[i] = from[i] + (to[i] - from[i]) * n;
+ }
+
+ this._update(curr);
+ return this;
+ }
+
+ // objech
for (var k in from) {
curr[k] = from[k] + (to[k] - from[k]) * n;
}
@@ -134,7 +146,7 @@ Tween.prototype.step = function(){
};
/**
- * Set update function to `fn` or
+ * Set update function to `fn` or
* when no argument is given this performs
* a "step".
*
@@ -151,11 +163,12 @@ Tween.prototype.update = function(fn){
/**
* Clone `obj`.
- *
+ *
* @api private
*/
function clone(obj) {
+ if (Array.isArray(obj)) return obj.slice();
var ret = {};
for (var key in obj) ret[key] = obj[key];
return ret;

0 comments on commit 4e08166

Please sign in to comment.