fix schedule so it uses runnertime correctly

diff --git a/dirty.html b/dirty.html
index ffd722568a88b160530332593b05d96953c32427..f3e739aced89b3360da11b2fa8b449da6475f731 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -246,6 +246,34 @@ let canvas = SVG('#canvas')
 //   a.clone().transform(obj, true).transform(obj2, true) // endPosition
 // })
 
+
+// let a = canvas.rect(200, 400).move(500, 400)
+//
+// a.animate(1000, 500).move(100, 100).animate(1000, 500).move(500, 400)
+
+let gradient = canvas.gradient('radial', function(gradient) {
+  gradient.stop(0, '#f00')
+  gradient.stop(1, '#ff0')
+})
+
+let gradientEarth = canvas.gradient('linear', function(gradient) {
+  gradient.stop(0, '#00f')
+  gradient.stop(1, '#0f0')
+})
+
+let sun = canvas.circle(200).center(500, 300).attr({ fill: gradient })
+
+let earth = canvas.circle(100).center(1000, 300).attr({fill: gradientEarth})
+
+let moon = canvas.circle(50).center(1200, 300).attr({fill: '#ffa'})
+
+earth.animate(10000).loop().ease('-')
+  .transform({rotate: 360, origin: [500, 300]}, true)
+  .transform({rotate: 720, origin: 'center'}, true)
+
+moon.animate(10000).loop().ease('-')
+  .transform({rotate: 360, origin: [500, 300]}, true)
+  .transform({rotate: 1080, origin: [1000, 300]}, true)
 /**
  * FUZZYS EXAMPLE
  */
@@ -273,59 +301,59 @@ let canvas = SVG('#canvas')
 // SAIVANS EXAMPLE
 
 
-canvas.ellipse(20, 20).center(100, 100)
-let r = canvas.rect(200, 400).move(100, 100)
-  .attr('opacity', 0.3)
-  //.transform({ tx: 300, ty: 500, origin: 'top-left' })
-
-// Normal usage
-let wait = 3000
-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))
-//let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.PID(0.01, 0.001, 1, 10))
-
-// var timer = 0
-// rDecl.timeline().source(() => {
-//   timer += 100
-//   return timer
-// })
-
-let runTransformation = (transform) => {
-  return () => {
-    //transform = new SVG.Matrix(transform)
-    let relative = true
-    let affine = true
-    r.transform(transform, relative)
-    rAnim.animate(wait).transform(transform, relative, affine)
-    rDecl.transform(transform, relative, affine)
-  }
-}
-
-setTimeout(runTransformation({
-  origin: 'top-left',
-  translate: [530, 250],
-  rotate: 300,
-  scale: 2,
-  shear: 1,
-}), 0.1 * wait )
-
-
-
-setTimeout(runTransformation({
-  origin: 'top-left',
-  translate: [530, 250],
-  rotate: 100,
-  scale: 2,
-  shear: 1,
-}), 0.4 * wait)
-
-setTimeout(runTransformation({
-  origin: 'top-left',
-  translate: [530, 250],
-  rotate: 100,
-  scale: 2,
-  shear: 1,
-}), 0.6 * wait)
+// canvas.ellipse(20, 20).center(100, 100)
+// let r = canvas.rect(200, 400).move(100, 100)
+//   .attr('opacity', 0.3)
+//   //.transform({ tx: 300, ty: 500, origin: 'top-left' })
+//
+// // Normal usage
+// let wait = 3000
+// 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))
+// //let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.PID(0.01, 0.001, 1, 10))
+//
+// // var timer = 0
+// // rDecl.timeline().source(() => {
+// //   timer += 100
+// //   return timer
+// // })
+//
+// let runTransformation = (transform) => {
+//   return () => {
+//     //transform = new SVG.Matrix(transform)
+//     let relative = true
+//     let affine = true
+//     r.transform(transform, relative)
+//     rAnim.animate(wait).transform(transform, relative, affine)
+//     rDecl.transform(transform, relative, affine)
+//   }
+// }
+//
+// setTimeout(runTransformation({
+//   origin: 'top-left',
+//   translate: [530, 250],
+//   rotate: 300,
+//   scale: 2,
+//   shear: 1,
+// }), 0.1 * wait )
+//
+//
+//
+// setTimeout(runTransformation({
+//   origin: 'top-left',
+//   translate: [530, 250],
+//   rotate: 100,
+//   scale: 2,
+//   shear: 1,
+// }), 0.4 * wait)
+//
+// setTimeout(runTransformation({
+//   origin: 'top-left',
+//   translate: [530, 250],
+//   rotate: 100,
+//   scale: 2,
+//   shear: 1,
+// }), 0.6 * wait)
 
 
 // canvas.circle(50).center(100, 0).attr('fill', 'gray')

diff --git a/src/timeline.js b/src/timeline.js
index a7e0cd3f5c1e9f8a30b17b9fc5ca3c83ea3d4c49..c0b0a997c7eee499d100db6653b7e8781fdd80a6 100644 (file)
--- a/src/timeline.js
+++ b/src/timeline.js
@@ -76,37 +76,39 @@ SVG.Timeline = SVG.invent({
       // The start time for the next animation can either be given explicitly,
       // derived from the current timeline time or it can be relative to the
       // last start time to chain animations direclty
-      var absoluteStartTime
+      var absoluteStartTime = 0
       delay = delay || 0
 
       // Work out when to start the animation
       if (when == null || when === 'last' || when === 'after') {
         // Take the last time and increment
-        absoluteStartTime = this._startTime + delay
+        absoluteStartTime = this._startTime //+ delay
 
       } else if (when === 'absolute' || when === 'start' ) {
         absoluteStartTime = delay
+        delay = 0
 
       } else if (when === 'now') {
-        absoluteStartTime = this._time + delay
+        absoluteStartTime = this._time //+ delay
 
-      } else if ( when === 'relative' ) {
-        absoluteStartTime = delay
-
-        if(this._runners.has(runner)) {
-          absoluteStartTime += this._time - runner.time()
+      } else if (when === 'relative') {
+        let runnerInfo = this._runners[runner.id]
+        if (runnerInfo) {
+          absoluteStartTime = runnerInfo.start + delay
+          delay = 0
         }
 
       } else {
-        // TODO: Throw error
+        throw new Error('Invalid value for the "when" parameter')
       }
 
       // manage runner
       runner.unschedule()
       runner.timeline(this)
+      runner.time(-delay)
 
       // save startTime for next runner
-      this._startTime = absoluteStartTime + runner.duration()
+      this._startTime = absoluteStartTime + runner.duration() + delay
 
       // save runnerInfo
       this._runners[runner.id] = {
@@ -216,12 +218,25 @@ SVG.Timeline = SVG.invent({
         // Get and run the current runner and ignore it if its inactive
         var runnerInfo = this._runners[this._order[i]]
         var runner = runnerInfo.runner
+        let dt = dtTime
+
+        // Make sure that we give the actual dt to the start if needed
+        let dtToStart = this._time - runnerInfo.start
+
+        // dont run runner if not started yet
+        if (dtToStart < 0) {
+          runnersLeft = true
+          continue
+        } else if (dtToStart < dt){
+          // adjust dt to make sure that animation is on point
+          dt = dtToStart
+        }
 
-        if(!runner.active()) continue
+        if (!runner.active()) continue
 
         // If this runner is still going, signal that we need another animation
         // frame, otherwise, remove the completed runner
-        var finished = runner.step(dtTime).done
+        var finished = runner.step(dt).done
         if (!finished) {
           runnersLeft = true
           // continue