fix transformations introducing target transforms with which the origin can be transf...

diff --git a/dirty.html b/dirty.html
index 68a9aa8537799b4e91c459b98061acf04580c921..10dbec393a651a05e13246c1f60dfef842a93f03 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -305,10 +305,16 @@ let wait = 1000
 let rAnim = r.clone().attr('fill', '#f00').animate(wait).attr('fill', '#0f0')
 let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15))
 
+// var timer = 0
+// rDecl.timeline().source(() => {
+//   timer += 100
+//   return timer
+// })
+
 let runTransformation = (transform) => {
   return () => {
-    let relative = false
-    let affine = false
+    let relative = true
+    let affine = true
     r.transform(transform, relative)
     rAnim.animate(wait).transform(transform, relative, affine)
     rDecl.transform(transform, relative, affine)
@@ -323,13 +329,14 @@ setTimeout(runTransformation({
   shear: 1,
 }), 0.1 * wait )
 
-// setTimeout(runTransformation({
-//   origin: 'top-left',
-//   translate: [530, 250],
-//   rotate: 800,
-//   scale: 2,
-//   shear: 1,
-// }), wait )
+
+setTimeout(runTransformation({
+  origin: 'top-left',
+  translate: [530, 250],
+  rotate: 100,
+  scale: 2,
+  shear: 1,
+}), wait / 2)
 
 
 

diff --git a/src/runner.js b/src/runner.js
index 298db36190bbfd3d0f300e7d3a7c45620eefdea6..d892637b8be774af918254cb3cf39ae94db3d757 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -49,6 +49,7 @@ SVG.Runner = SVG.invent({
 
     // Save transforms applied to this runner
     this.transforms = new SVG.Matrix()
+    this.targets = new SVG.Matrix()
 
     // Looping variables
     this._haveReversed = false
@@ -449,8 +450,14 @@ SVG.Runner = SVG.invent({
       return this
     },
 
+    addTarget: function (target) {
+      this.targets = this.targets.lmultiply(target)
+      return this
+    },
+
     clearTransform: function () {
       this.transforms = new SVG.Matrix()
+      this.targets = new SVG.Matrix()
       return this
     }
   },
@@ -542,6 +549,13 @@ SVG.extend(SVG.Element, {
       .reduce((last, curr) => last.lmultiply(curr))
   },
 
+  _targetTransform (current) {
+    return this._transformationRunners
+      .filter((runner) => runner.id <= current.id)
+      .map(runner => runner.targets)
+      .reduce((last, curr) => last.lmultiply(curr))
+  },
+
   addRunner: function (runner) {
     this._transformationRunners[runner.id+1] = runner
 
@@ -554,6 +568,7 @@ SVG.extend(SVG.Element, {
     if (this._frameId == null) {
       this._transformationRunners = [{
         transforms: new SVG.Matrix(this),
+        targets: new SVG.Matrix(this),
         done: true,
         id: -1
       }]
@@ -648,6 +663,7 @@ SVG.extend(SVG.Runner, {
     let current
     let currentAngle
     var u = 0
+    let firstRun = true
 
     function setup () {
 
@@ -663,7 +679,7 @@ SVG.extend(SVG.Runner, {
       // mid-animation (try turning on the second animation in dirty)
 
       let transformSpace = relative
-        ? new SVG.Matrix(element)
+        ? element._targetTransform(this)
         : undefined
       origin = origin || getOrigin(transforms, element, transformSpace)
 
@@ -700,6 +716,11 @@ SVG.extend(SVG.Runner, {
         start.rotate = currentAngle || start.rotate
       }
 
+      if (firstRun) {
+        this.addTarget(target)
+        firstRun = false
+      }
+
       morpher.from(start)
       morpher.to(target)
 
@@ -711,13 +732,17 @@ SVG.extend(SVG.Runner, {
       // on this runner. We are absolute. We dont need these!
       if (!relative) this.clearTransform()
 
+      // let {x, y} = new SVG.Point(origin).transform(element._currentTransform(this))
+      // morpher._from.splice(-2, 2, x, y)
+      // morpher._to.splice(-2, 2, x, y)
+
       // fix the origin so is in the right space
-      if (affine) {
-        let currentMatrix = element._currentTransform(this)
-        let {x, y} = new SVG.Point(origin).transform(currentMatrix)
-        morpher._from.splice(-2, 2, x, y)
-        morpher._to.splice(-2, 2, x, y)
-      }
+      // if (affine) {
+      //   let currentMatrix = element._currentTransform(this)
+      //   let {x, y} = new SVG.Point(origin).transform(currentMatrix)
+      //   morpher._from.splice(-2, 2, x, y)
+      //   morpher._to.splice(-2, 2, x, y)
+      // }
 
       let affineParameters = morpher.at(pos)
       currentAngle = affineParameters.rotate