transformation with correct rotation, fixed Color animation

2 files changed, 78 insertions, 42 deletions

diff --git a/src/fxnew.js b/src/fxnew.js
index 2960845..e20fc77 100644
--- a/src/fxnew.js
+++ b/src/fxnew.js
@@ -30,24 +30,33 @@ SVG.FX = SVG.invent({
     }
 
     this.attrs = {
-      // todo: check if attr is present in animation before saving
+      // holds all attributes which are not represented from a function svg.js provides
     }
 
     this.styles = {
-
+      // holds all styles which should be animated
     }
 
+    this.transforms = [
+      // holds all transformations of teh form:
+      // [A, B, C] or, [A, [25, 0, 0]] where ABC are matrixes and the array represents a rotation
+    ]
+
     this._once = {
       // functions to fire at a specific position
       // e.g. "0.5": function foo(){}
     }
 
+
   }
 
 , extend: {
 
     // sets up the animation
     animate: function(o){
+      // the end time of the previous is our start
+      var start = this._prev ? this._prev._end : +new Date
+
       o = o || {}
 
       if(typeof o == 'number') o = {duration:o}
@@ -55,9 +64,6 @@ SVG.FX = SVG.invent({
       this._duration = o.duration || 1000
       this._delay = o.delay || 0
 
-      // the end time of the previous is our start
-      var start = this._prev ? this._prev._end : +new Date
-
       this._start = start + this._delay
       this._end = this._start + this._duration
 
@@ -155,7 +161,6 @@ SVG.FX = SVG.invent({
     // kicks off the animation - only does something when this obejct is the current
     // todo: remove timeout. we dont rly need a delay. it can be accomplished from the user itself
   , start: function(){
-
       // dont start if already started
       if(!this.active && this.current() == this){
         this._start = +new Date + this._delay
@@ -181,13 +186,22 @@ SVG.FX = SVG.invent({
       }
 
       for(i in this.attrs){
-        this.attrs[i].value = this.target.attr(i)
+        if(this.attrs[i] instanceof SVG.Color){
+          var color = new SVG.Color(this.target.attr(i))
+          this.attrs[i].r = color.r
+          this.attrs[i].g = color.g
+          this.attrs[i].b = color.b
+        }else{
+          this.attrs[i].value = this.target.attr(i)
+        }
       }
 
       for(i in this.styles){
         this.styles[i].value = this.target.style(i)
       }
 
+      this.transformations = this.target.matrixify()
+
       this.init = true
     }
 
@@ -240,10 +254,10 @@ SVG.FX = SVG.invent({
         this.shared.reversed = false
         this.seek(this.pos)
       }
-      
+
       return this
     }
-    
+
     // sets the direction to backwards
   , reverse: function(){
       if(!this.shared.reversed){
@@ -252,7 +266,7 @@ SVG.FX = SVG.invent({
       }
       return this
     }
-    
+
     // resumes a currently paused animation
   , resume: function(){
       if(this.paused){
@@ -328,7 +342,7 @@ SVG.FX = SVG.invent({
       var start = this.first()._start
         , end = this._end
         , next = this
-      
+
       while(next = next.next()){
         end += next._duration + next._delay
       }
@@ -361,7 +375,7 @@ SVG.FX = SVG.invent({
     }
 
     // perform one step of the animation
-    // when ignoreTime is set the method uses the currently set position. 
+    // when ignoreTime is set the method uses the currently set position.
     // Otherwise it will calculate the position based on the time passed
   , step: function(ignoreTime){
 
@@ -369,7 +383,7 @@ SVG.FX = SVG.invent({
       if(!ignoreTime) this.pos = this.timeToPos(+new Date)
 
       if(this.shared.reversed) this.pos = 1 - this.pos
-      
+
       // correct position
       if(this.pos > 1) this.pos = 1
       if(this.pos < 0) this.pos = 0
@@ -389,9 +403,7 @@ SVG.FX = SVG.invent({
       this.target.fire('during', {pos: this.pos, eased: eased, fx: this})
 
       // apply the actual animation to every property
-      this.eachAt(function(method, args){
-        this.target[method].apply(this.target, args)
-      })
+      this.eachAt()
 
       // do final code when situation is finished
       if(this.pos == 1){
@@ -448,40 +460,54 @@ SVG.FX = SVG.invent({
 
     // calculates the step for every property and calls block with it
     // todo: include block directly cause it is used only for this purpose
-  , eachAt: function(block){
-      var i, at
+  , eachAt: function(){
+      var i, at, self = this, target = this.target
 
+      // apply animations which can be called trough a method
       for(i in this.animations){
 
         at = [].concat(this.animations[i]).map(function(el){
-          if(el.at) return el.at(this.easing(this.pos), this.pos)
-          return el
-        }.bind(this))
+          return el.at ? el.at(self.easing(self.pos), self.pos) : el
+        })
 
-        block.call(this, i, at)
+        target[i].apply(target, at)
 
       }
 
+      // apply animation which has to be applied with attr()
       for(i in this.attrs){
 
         at = [i].concat(this.attrs[i]).map(function(el){
-          if(el.at) return el.at(this.easing(this.pos), this.pos)
-          return el
-        }.bind(this))
+          return el.at ? el.at(self.easing(self.pos), self.pos) : el
+        })
 
-        block.call(this, 'attr', at)
+        target.attr.apply(target, at)
 
       }
 
+      // apply animation which has to be applied with style()
       for(i in this.styles){
 
         at = [i].concat(this.styles[i]).map(function(el){
-          if(el.at) return el.at(this.easing(this.pos), this.pos)
-          return el
-        }.bind(this))
+          return el.at ? el.at(self.easing(self.pos), self.pos) : el
+        })
+
+        target.style.apply(target, at)
+
+      }
 
-        block.call(this, 'style', at)
+      // animate transformations which has to be chained
+      if(this.transforms.length){
+        at = this.transformations
+        for(i in this.transforms){
+          if(Array.isArray(this.transforms[i])){
+            at = at.rotate(this.transforms[i][0].at(this.easing(this.pos)), this.transforms[i][1], this.transforms[i][2])
+          }else{
+            at = at.multiply(this.transforms[i].at(this.easing(this.pos)))
+          }
+        }
 
+        target.matrix(at)
       }
 
       return this
@@ -578,11 +604,19 @@ SVG.extend(SVG.FX, {
       // detect format
       if (a == 'transform') {
         // merge given transformation with an existing one
-        if (this.attrs[a])
-          v = this.attrs[a].multiply(v)
+        //if (this.attrs[a])
+        //  v = this.attrs[a].multiply(v)
+
+        if(v.rotation && !v.a){
+          this.transforms.push([new SVG.Number(0).morph(v.rotation), v.cx || 0, v.cy || 0])
+          this.start()
+        }else{
+          this.transforms.push(new SVG.Matrix(this.target).morph(v))
+          this.start()
+        }
 
         // prepare matrix for morphing
-        this.push(a, (new SVG.Matrix(this.target)).morph(v), 'attrs')
+        //this.push(a, (new SVG.Matrix(this.target)).morph(v), 'transforms')
 
         // add parametric rotation values
         /*if (this.param) {
@@ -597,9 +631,9 @@ SVG.extend(SVG.FX, {
         }*/
 
       } else {
-        if(typeof this[a] == 'function'){
+        /*if(typeof this[a] == 'function'){
           return this[a](v)
-        }
+        }*/
 
         this.push(a, new SVG.MorphObj(from, v), 'attrs')
       }
diff --git a/src/transform.js b/src/transform.js
index db2c5c3..2d6429c 100644
--- a/src/transform.js
+++ b/src/transform.js
@@ -21,8 +21,8 @@ SVG.extend(SVG.Element, SVG.FX, {
     }
 
     // get current matrix
-    matrix = this instanceof SVG.FX && this.attrs.transform ?
-      this.attrs.transform :
+    matrix = /*this instanceof SVG.FX && this.attrs.transform ?
+      this.attrs.transform :*/
       new SVG.Matrix(target)
 
     // ensure relative flag
@@ -42,23 +42,25 @@ SVG.extend(SVG.Element, SVG.FX, {
       ensureCentre(o, target)
 
       // relativize rotation value
-      if (relative) {
+      /*if (relative) {
         o.rotation += this.param && this.param.rotation != null ?
           this.param.rotation :
           matrix.extract().rotation
-      }
+      }*/
 
       // store parametric values
-      this.param = o
+      //this.param = o
 
+      if(this instanceof SVG.FX) return this.attr('transform', o)
+      
       // apply transformation
-      if (this instanceof SVG.Element) {
+      //if (this instanceof SVG.Element) {
         matrix = relative ?
           // relative
           matrix.rotate(o.rotation, o.cx, o.cy) :
           // absolute
           matrix.rotate(o.rotation - matrix.extract().rotation, o.cx, o.cy)
-      }
+      //}
 
     // act on scale
     } else if (o.scale != null || o.scaleX != null || o.scaleY != null) {