Added morph() and at() methods to SVG.Color

2 files changed, 34 insertions, 25 deletions

diff --git a/src/color.js b/src/color.js
index 57a4d64..9821743 100755
--- a/src/color.js
+++ b/src/color.js
@@ -60,6 +60,24 @@ SVG.extend(SVG.Color, {
          + (this.g / 255 * 0.59)
          + (this.b / 255 * 0.11)
   }
+  // Make color morphable
+, morph: function(color) {
+    this.destination = new SVG.Color(color)
+
+    return this
+  }
+  // Get morphed color at given position
+, at: function(pos) {
+    /* make sure a destination is defined */
+    if (!this.destination) return this
+
+    /* generate morphed array */
+    return new SVG.Color({
+      r: ~~(this.r + (this.destination.r - this.r) * pos)
+    , g: ~~(this.g + (this.destination.g - this.g) * pos)
+    , b: ~~(this.b + (this.destination.b - this.b) * pos)
+    })
+  }
   // Private: ensure to six-based hex 
 , _fullHex: function(hex) {
     return hex.length == 4 ?
@@ -87,4 +105,11 @@ SVG.Color.test = function(color) {
 // Test if given value is a rgb object
 SVG.Color.isRgb = function(color) {
   return color && typeof color.r == 'number'
+               && typeof color.g == 'number'
+               && typeof color.b == 'number'
+}
+
+// Test if given value is a color
+SVG.Color.isColor = function(color) {
+  return SVG.Color.isRgb(color) || SVG.Color.test(color)
 }
\ No newline at end of file
diff --git a/src/fx.js b/src/fx.js
index 0f73a10..28d0da8 100755
--- a/src/fx.js
+++ b/src/fx.js
@@ -208,12 +208,17 @@ SVG.extend(SVG.FX, {
   }
   // Add animatable attributes
 , attr: function(a, v, n) {
-    if (typeof a == 'object')
+    if (typeof a == 'object') {
       for (var key in a)
         this.attr(key, a[key])
     
-    else
-      this.attrs[a] = { from: this.target.attr(a), to: v }
+    } else {
+      var from = this.target.attr(a)
+
+      this.attrs[a] = SVG.Color.isColor(from) ?
+        new SVG.Color(from).morph(v) :
+        { from: from, to: v }
+    }
     
     return this
   }
@@ -410,32 +415,11 @@ SVG.extend(SVG.FX, {
         .plus(new SVG.Number(o.from)) :
     
     /* color recalculation */
-    o.to && (o.to.r || SVG.Color.test(o.to)) ?
-      this._color(o, pos) :
+    o instanceof SVG.Color ? o.at(pos) :
     
     /* for all other values wait until pos has reached 1 to return the final value */
     pos < 1 ? o.from : o.to
   }
-  // Private: tween color
-, _color: function(o, pos) {
-    var from, to
-    
-    /* normalise pos */
-    pos = pos < 0 ? 0 : pos > 1 ? 1 : pos
-    
-    /* convert FROM */
-    from = new SVG.Color(o.from)
-    
-    /* convert TO hex to rgb */
-    to = new SVG.Color(o.to)
-    
-    /* tween color and return hex */
-    return new SVG.Color({
-      r: ~~(from.r + (to.r - from.r) * pos)
-    , g: ~~(from.g + (to.g - from.g) * pos)
-    , b: ~~(from.b + (to.b - from.b) * pos)
-    }).toHex()
-  }
   
 })