From 8cde3eba2a98d9d9003033062b0efc9811315f08 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Wed, 10 Oct 2018 19:00:41 +0200 Subject: [PATCH] fix schedule so it uses runnertime correctly --- dirty.html | 134 +++++++++++++++++++++++++++++------------------- src/timeline.js | 39 +++++++++----- 2 files changed, 108 insertions(+), 65 deletions(-) diff --git a/dirty.html b/dirty.html index ffd7225..f3e739a 100644 --- 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 a7e0cd3..c0b0a99 100644 --- 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 -- 2.39.5