implement methods, reorganize runner, list questions

1 files changed, 22 insertions, 9 deletions

diff --git a/dirty.html b/dirty.html
index 41c1583..21cf58e 100644
--- a/dirty.html
+++ b/dirty.html
@@ -74,8 +74,8 @@ function getColor(t) {
 //   }
 // }
 
-// var bla = SVG('<rect>').size(50, 50).center(100, 100).addTo('svg')
-// bla.animate().move(220, 200)
+var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
+bla.animate().size(220, 200).queue(null, console.log)
 
 // var randPoint = (x = 50, y = 50) => [
 //   Math.random() * 100 - 50 + x,
@@ -101,14 +101,27 @@ function getColor(t) {
 //   ])
 // })
 
-var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
-var anim = mover.animate(new SVG.Spring(500, 10)).move(500, 500)
+// var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
+// var anim = mover.animate(new SVG.Spring(500, 10)).move(500, 500)
+//
+// SVG.on(document, 'mousemove', function (e) {
+//   //mover.animate(SVG.PID()).move(e.pageX, e.pageY)
+//   var p = mover.point(e.pageX, e.pageY)
+//   anim.center(p.x, p.y)
+// })
+
+// var timeline = new SVG.Timeline().pause()
+// var runner = new SVG.Runner(100000)
+// runner.queue(null, function (pos) {
+//   console.log(pos)
+// })
+// timeline.schedule(runner)
+//
+// runner.after(() => console.log('finished with after'))
+// runner.on('finish', () => console.log('finished with on'))
 
-SVG.on(document, 'mousemove', function (e) {
-  //mover.animate(SVG.PID()).move(e.pageX, e.pageY)
-  var p = mover.point(e.pageX, e.pageY)
-  anim.center(p.x, p.y)
-})
+//timeline.play()
+//timeline.finish()
 
 </script>