add array tweening support

Readme.md

@@ -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.
 

component.json

@@ -9,7 +9,8 @@
     "component/ease": "*"
   },
   "development": {
-    "component/raf": "*"
+    "component/raf": "*",
+    "component/autoscale-canvas": "*"
   },
   "license": "MIT",
   "scripts": [

examples/array.html

@@ -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>

index.js

@@ -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;