Added to() method in the SVG.FX

1 files changed, 104 insertions, 93 deletions

diff --git a/src/fx.js b/src/fx.js
index 1b0247e..e1063e3 100644
--- a/src/fx.js
+++ b/src/fx.js
@@ -7,7 +7,9 @@ SVG.FX = function(element) {
 SVG.extend(SVG.FX, {
   // Add animation parameters and start animation
   animate: function(d, ease, delay) {
-    var fx = this
+    var akeys, tkeys, skeys, key
+      , element = this.target
+      , fx = this
     
     /* dissect object if one is passed */
     if (typeof d == 'object') {
@@ -15,113 +17,122 @@ SVG.extend(SVG.FX, {
       ease = d.ease
       d = d.duration
     }
-    
-    /* delay animation */
-    this.timeout = setTimeout(function() {
-      
-      /* ensure default duration and easing */
-      d = d == null ? 1000 : d
-      ease = ease || '<>'
-      
-      var akeys, tkeys, skeys
-        , interval  = 1000 / 60
-        , element   = fx.target
-        , start     = new Date().getTime()
-        , finish    = start + d
 
-      /* start animation */
-      fx.interval = setInterval(function(){
-        // This code was borrowed from the emile.js micro framework by Thomas Fuchs, aka MadRobby.
-        var i, key
-          , time = new Date().getTime()
-          , pos = time > finish ? 1 : (time - start) / d
+    /* ensure default duration and easing */
+    d = d == null ? 1000 : d
+    ease = ease || '<>'
 
-        /* collect attribute keys */
-        if (akeys == null) {
-          akeys = []
-          for (key in fx.attrs)
-            akeys.push(key)
-        }
+    /* process values */
+    fx.to = function(pos) {
+      var i
 
-        /* collect transformation keys */
-        if (tkeys == null) {
-          tkeys = []
-          for (key in fx.trans)
-            tkeys.push(key)
-        }
+      /* normalise pos */
+      pos = pos < 0 ? 0 : pos > 1 ? 1 : pos
 
-        /* collect style keys */
-        if (skeys == null) {
-          skeys = []
-          for (key in fx.styles)
-            skeys.push(key)
-        }
+      /* collect attribute keys */
+      if (akeys == null) {
+        akeys = []
+        for (key in fx.attrs)
+          akeys.push(key)
+      }
 
-        /* apply easing */
-        pos = ease == '<>' ?
-          (-Math.cos(pos * Math.PI) / 2) + 0.5 :
-        ease == '>' ?
-          Math.sin(pos * Math.PI / 2) :
-        ease == '<' ?
-          -Math.cos(pos * Math.PI / 2) + 1 :
-        ease == '-' ?
-          pos :
-        typeof ease == 'function' ?
-          ease(pos) :
-          pos
+      /* collect transformation keys */
+      if (tkeys == null) {
+        tkeys = []
+        for (key in fx.trans)
+          tkeys.push(key)
+      }
 
-        /* run all x-position properties */
-        if (fx._x)
-          element.x(fx._at(fx._x, pos))
-        else if (fx._cx)
-          element.cx(fx._at(fx._cx, pos))
+      /* collect style keys */
+      if (skeys == null) {
+        skeys = []
+        for (key in fx.styles)
+          skeys.push(key)
+      }
 
-        /* run all y-position properties */
-        if (fx._y)
-          element.y(fx._at(fx._y, pos))
-        else if (fx._cy)
-          element.cy(fx._at(fx._cy, pos))
+      /* apply easing */
+      pos = ease == '<>' ?
+        (-Math.cos(pos * Math.PI) / 2) + 0.5 :
+      ease == '>' ?
+        Math.sin(pos * Math.PI / 2) :
+      ease == '<' ?
+        -Math.cos(pos * Math.PI / 2) + 1 :
+      ease == '-' ?
+        pos :
+      typeof ease == 'function' ?
+        ease(pos) :
+        pos
 
-        /* run all size properties */
-        if (fx._size)
-          element.size(fx._at(fx._size.width, pos), fx._at(fx._size.height, pos))
+      /* run all x-position properties */
+      if (fx._x)
+        element.x(fx._at(fx._x, pos))
+      else if (fx._cx)
+        element.cx(fx._at(fx._cx, pos))
 
-        /* run all viewbox properties */
-        if (fx._viewbox)
-          element.viewbox(
-            fx._at(fx._viewbox.x, pos)
-          , fx._at(fx._viewbox.y, pos)
-          , fx._at(fx._viewbox.width, pos)
-          , fx._at(fx._viewbox.height, pos)
-          )
+      /* run all y-position properties */
+      if (fx._y)
+        element.y(fx._at(fx._y, pos))
+      else if (fx._cy)
+        element.cy(fx._at(fx._cy, pos))
 
-        /* animate attributes */
-        for (i = akeys.length - 1; i >= 0; i--)
-          element.attr(akeys[i], fx._at(fx.attrs[akeys[i]], pos))
+      /* run all size properties */
+      if (fx._size)
+        element.size(fx._at(fx._size.width, pos), fx._at(fx._size.height, pos))
 
-        /* animate transformations */
-        for (i = tkeys.length - 1; i >= 0; i--)
-          element.transform(tkeys[i], fx._at(fx.trans[tkeys[i]], pos))
+      /* run all viewbox properties */
+      if (fx._viewbox)
+        element.viewbox(
+          fx._at(fx._viewbox.x, pos)
+        , fx._at(fx._viewbox.y, pos)
+        , fx._at(fx._viewbox.width, pos)
+        , fx._at(fx._viewbox.height, pos)
+        )
 
-        /* animate styles */
-        for (i = skeys.length - 1; i >= 0; i--)
-          element.style(skeys[i], fx._at(fx.styles[skeys[i]], pos))
+      /* animate attributes */
+      for (i = akeys.length - 1; i >= 0; i--)
+        element.attr(akeys[i], fx._at(fx.attrs[akeys[i]], pos))
 
-        /* callback for each keyframe */
-        if (fx._during)
-          fx._during.call(element, pos, function(from, to) {
-            return fx._at({ from: from, to: to }, pos)
-          })
+      /* animate transformations */
+      for (i = tkeys.length - 1; i >= 0; i--)
+        element.transform(tkeys[i], fx._at(fx.trans[tkeys[i]], pos))
 
-        /* finish off animation */
-        if (time > finish) {
-          clearInterval(fx.interval)
-          fx._after ? fx._after.apply(element, [fx]) : fx.stop()
-        }
+      /* animate styles */
+      for (i = skeys.length - 1; i >= 0; i--)
+        element.style(skeys[i], fx._at(fx.styles[skeys[i]], pos))
 
-      }, d > interval ? interval : d)
-      
-    }, delay || 0)
+      /* callback for each keyframe */
+      if (fx._during)
+        fx._during.call(element, pos, function(from, to) {
+          return fx._at({ from: from, to: to }, pos)
+        })
+    }
+    
+    if (typeof d === 'number') {
+      /* delay animation */
+      this.timeout = setTimeout(function() {
+        var interval  = 1000 / 60
+          , start     = new Date().getTime()
+          , finish    = start + d
+  
+        /* start animation */
+        fx.interval = setInterval(function(){
+          // This code was borrowed from the emile.js micro framework by Thomas Fuchs, aka MadRobby.
+          var time = new Date().getTime()
+            , pos = time > finish ? 1 : (time - start) / d
+  
+          /* process values */
+          fx.to(pos)
+  
+          /* finish off animation */
+          if (time > finish) {
+            clearInterval(fx.interval)
+            fx._after ? fx._after.apply(element, [fx]) : fx.stop()
+          }
+  
+        }, d > interval ? interval : d)
+        
+      }, delay || 0)
+    }
     
     return this
   }