fix merging of transformations

1 files changed, 12 insertions, 28 deletions

diff --git a/dirty.html b/dirty.html
index 1bdf7ec..1708b0d 100644
--- a/dirty.html
+++ b/dirty.html
@@ -74,7 +74,7 @@ function getColor(t) {
 //   .animate()
 //   .move(300, 200)
 
-//
+
 // for (let i = 0 ; i < 15; i++) {
 //   for (let j = 0 ; j < 10; j++) {
 //
@@ -200,13 +200,9 @@ function getColor(t) {
 
 var timer = 0
 let rec1 = SVG('<rect>').addTo('svg').size(100, 100)//.transform({translateX: -50, translateY: -50})
-let rec2 = SVG('<rect>').addTo('svg').size(100, 100)//.transform({translateX: -50, translateY: -50})
 rec1.timeline().source(() => {
-  timer += 5
-  return timer
-})
-rec2.timeline().source(() => {
-  timer += 5
+  timer += 1
+  document.querySelector('#absolute span').textContent = timer
   return timer
 })
 
@@ -215,21 +211,15 @@ var runner = rec1
   //.animate().transform({rotate: -45, origin: [50, 50]})
    .animate(500)
   .transform({
-    a: -1, b: -0.1, c: 0.1, d: -1, e: 200, f: 200, affine: true
-  }, true)
-  .animate(500, 0, 'after')
-  .transform({scale:2}, true)
-  // .transform({rotate: 360}, true)
-  // .transform({translateX: 50, translateY: 50}, true)
-  //.transform({translateX: 50, translateY: 50}, true)
-   // .animate(500, 0, 'absolute')
-   //    .transform({scale: 2}, true)
-  // .animate(2000, 0, 'absolute')
-  //    .transform({rotate: -300})
-var runner = rec2
-  // .animate(100).attr('fill', '#fff')
-  .animate().transform({rotate: -45, origin: [50, 50]})
-  .transform({scale:2}, true)
+    rotate: 90,
+    origin: [50, 50],
+  })
+  .animate(200, 0, 'absolute')
+  .transform({
+    scale:2
+  })
+  // .animate(500, 0)
+  // .transform({scale:2})
   // .transform({rotate: 360}, true)
   // .transform({translateX: 50, translateY: 50}, true)
   //.transform({translateX: 50, translateY: 50}, true)
@@ -238,12 +228,6 @@ var runner = rec2
   // .animate(2000, 0, 'absolute')
   //    .transform({rotate: -300})
 
-// transform(SVG.Matrix()) // should be affine
-// transform(SVG.Matrix(), true) // should be relative
-// transform(SVG.Matrix(), true, false) // should relative and nonaffine
-// transform({...}) and transform({...}, true) // should animate parameters absolute or relative
-// transform({...}, ..., false)
-
 // r.step(300) // should be 0.1
 // r.step(2 * 1100) // should be 0
 // r.step(-50) // 0.05