fix origin for relative transformations

1 files changed, 31 insertions, 5 deletions

diff --git a/dirty.html b/dirty.html
index 7942f2d..3b9168a 100644
--- a/dirty.html
+++ b/dirty.html
@@ -178,9 +178,26 @@ function getColor(t) {
 //   anim.transform({px: p.x - 100, py: p.y - 100})
 //   //anim.center(p.x, p.y)
 // })
-
+/*
 let canvas = SVG('#canvas')
 
+let rectangle = canvas.rect(100, 200).move(100, 0)
+
+let bbox = rectangle.bbox()
+
+var timer = 0
+rectangle.timeline().source(() => {
+  timer += 2
+  document.querySelector('#absolute span').textContent = timer
+  return timer
+})
+rectangle.animate().transform({
+  rotate: 90,
+  origin: [bbox.cx, bbox.cy]
+})*/
+
+
+let canvas = SVG('#canvas')
 // Make the green rectange
 canvas.rect(200, 400).move(200, 400)
   .attr('opacity', 0.3)
@@ -191,8 +208,17 @@ let a = canvas.rect(200, 400).move(200, 400)
   .attr('opacity', 0.3)
   .addClass('pink')
   .transform({ px: 100, py: 500, origin: 'top-left' })
-  .animate()
-  .transform({ rotate: 500, origin: 'center' })
+
+
+  var timer = 0
+  a.timeline().source(() => {
+    timer += 1
+    document.querySelector('#absolute span').textContent = timer
+    return timer
+  })
+
+a.animate()
+  .transform({ translate: [200, 200], rotate: 500, origin: 'center' }, true)
 
 // Put an ellipse where we expect the object to be
 canvas.ellipse(30, 30).center(100, 500)
@@ -229,7 +255,7 @@ canvas.ellipse(30, 30).center(100, 500)
 // r.step(1200) // should be 0.1s
 // r.step(-300) // should be 0.9s
 
-
+/*
 var timer = 0
 SVG('svg').viewbox(-150, -150, 1000, 1000)
 let rec1 = SVG('<rect>').addTo('svg')
@@ -254,7 +280,7 @@ var runner = rec1
     .transform({
       scale:2
     })
-
+*/
     // .animate(400, 0, 'absolute')
     // .transform({
     //   rotate: 360,