summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--dirty.html129
-rw-r--r--dist/svg.js20
-rw-r--r--src/animation/Timeline.js10
-rw-r--r--src/modules/optional/arrange.js13
4 files changed, 106 insertions, 66 deletions
diff --git a/dirty.html b/dirty.html
index 23b2d6d..8824c6b 100644
--- a/dirty.html
+++ b/dirty.html
@@ -102,41 +102,45 @@ function getColor(t) {
// }
// }
-//SVG.defaults.timeline.ease = '-'
-//
-// var r = new SVG.Runner(1000)
-// var t = new SVG.Timeline()
-// r.schedule(t, 200)
-// .animate(500).loop(5, true, 100)
-// .animate(600, 200, 'absolute')
-// .animate(600, 300)
-// .animate(600, 300, 'now')
-// .animate(1000, 0, 'absolute').loop(6, true)
-//
-// var canvas = SVG('svg')
-// var schedule = t.schedule()
-//
-// schedule.forEach((s, i) => {
-// var rect = canvas.rect(s.duration / 10, 25)
-// .move(100 + s.start/10, 100 + i*30)
-// .attr('fill', '#777')
-//
-// s.runner.element(rect)
-// .attr('fill', getColor(i*0.1))
-//
-// // if (i===0)
-// // s.runner.during(console.log)
-// })
-//
-// var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black').clone()
-// canvas.line(100, 300, 800, 300).attr('stroke', 'black')
-//
+let canvas = SVG('#canvas')
+
+canvas.attr('viewBox', null)
+
+SVG.defaults.timeline.ease = '-'
+
+var r = new SVG.Runner(1000)
+var t = new SVG.Timeline()
+r.schedule(t, 200)
+ .animate(500).loop(5, true, 100)
+ .animate(600, 200, 'absolute')
+ .animate(600, 300)
+ .animate(600, 300, 'now')
+ .animate(1000, 0, 'absolute').loop(6, true)
+
+var schedule = t.schedule()
+
+schedule.forEach((s, i) => {
+ var rect = canvas.rect(s.duration / 10, 25)
+ .move(100 + s.start/10, 100 + i*30)
+ .attr('fill', '#000')
+
+ s.runner.element(rect)
+ .attr('fill', getColor(i*0.1))
+
+ // if (i===0)
+ // s.runner.during(console.log)
+})
+
+var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black')
+mover.clone().insertAfter(mover)
+canvas.line(100, 300, 800, 300).attr('stroke', 'black')
+
// t.on('time', function (e) {
// mover.x(100 + e.detail/10)
// })
-//
-//
-// console.log(schedule)
+
+
+console.log(schedule)
// var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
// bla.animate().size(220, 200).queue(null, console.log)
@@ -202,7 +206,7 @@ rectangle.animate().transform({
})*/
//
-let canvas = SVG('#canvas')
+
// SVG('#absolute').on('input slide', function (e) {
// var val = e.target.value
@@ -248,32 +252,51 @@ let canvas = SVG('#canvas')
//
// 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})
+/* FUZZYMS PLANETS!! */
+// let canvas = SVG('#canvas')
+// 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)
+// .on('step', (e) => {
+// // console.log(e)
+// })
+//
+// moon.animate(10000).loop().ease('-')
+// .transform({rotate: 360, origin: [500, 300]}, true)
+// .transform({rotate: 1080, origin: [1000, 300]}, true)
+
+
+
+
+
+
+
+
+
+
+
-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)
- .on('step', (e) => {
- // console.log(e)
- })
-moon.animate(10000).loop().ease('-')
- .transform({rotate: 360, origin: [500, 300]}, true)
- .transform({rotate: 1080, origin: [1000, 300]}, true)
/**
* FUZZYS EXAMPLE
*/
diff --git a/dist/svg.js b/dist/svg.js
index 7b311f9..6abe275 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
* @copyright Wout Fierens <wout@mick-wout.com>
* @license MIT
*
-* BUILT: Mon Nov 19 2018 21:40:15 GMT+0100 (GMT+01:00)
+* BUILT: Tue Nov 20 2018 16:59:18 GMT+0100 (GMT+01:00)
*/;
var SVG = (function () {
'use strict';
@@ -595,6 +595,14 @@ var SVG = (function () {
this.parent().add(element, i + 1);
return this;
}
+ function insertBefore(element) {
+ element = makeInstance(element);
+ element.before(this);
+ }
+ function insertAfter(element) {
+ element = makeInstance(element);
+ element.after(this);
+ }
registerMethods('Dom', {
siblings: siblings,
position: position,
@@ -605,7 +613,9 @@ var SVG = (function () {
front: front,
back: back,
before: before,
- after: after
+ after: after,
+ insertBefore: insertBefore,
+ insertAfter: insertAfter
});
// Parse unit value
@@ -5046,7 +5056,7 @@ var SVG = (function () {
// FIXME: how to sort? maybe by runner id?
if (runner == null) {
return this._runners.map(makeSchedule).sort(function (a, b) {
- return a.start - b.start || a.duration - b.duration;
+ return a.runner.id - b.runner.id; // return (a.start - b.start) || (a.duration - b.duration)
});
}
@@ -5200,8 +5210,8 @@ var SVG = (function () {
this._lastSourceTime = time; // Update the time
this._time += dtTime;
- this._lastStepTime = this._time; // this.fire('time', this._time)
- // Run all of the runners directly
+ this._lastStepTime = this._time;
+ this.fire('time', this._time); // Run all of the runners directly
var runnersLeft = false;
diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js
index 6abcb80..6e1ed8d 100644
--- a/src/animation/Timeline.js
+++ b/src/animation/Timeline.js
@@ -38,16 +38,11 @@ export default class Timeline extends EventTarget {
this._lastStepTime = 0
}
- /**
- *
- */
-
// schedules a runner on the timeline
schedule (runner, delay, when) {
- // FIXME: how to sort? maybe by runner id?
if (runner == null) {
return this._runners.map(makeSchedule).sort(function (a, b) {
- return (a.start - b.start) || (a.duration - b.duration)
+ return a.runner.id - b.runner.id
})
}
@@ -189,7 +184,7 @@ export default class Timeline extends EventTarget {
// Update the time
this._time += dtTime
this._lastStepTime = this._time
- // this.fire('time', this._time)
+ this.fire('time', this._time)
// Run all of the runners directly
var runnersLeft = false
@@ -238,6 +233,7 @@ export default class Timeline extends EventTarget {
if (runnersLeft) {
this._nextFrame = Animator.frame(this._step.bind(this))
} else {
+ this.fire('finished')
this._nextFrame = null
}
return this
diff --git a/src/modules/optional/arrange.js b/src/modules/optional/arrange.js
index 6ce2eea..f06509a 100644
--- a/src/modules/optional/arrange.js
+++ b/src/modules/optional/arrange.js
@@ -107,5 +107,16 @@ export function insertAfter (element) {
}
registerMethods('Dom', {
- siblings, position, next, prev, forward, backward, front, back, before, after
+ siblings,
+ position,
+ next,
+ prev,
+ forward,
+ backward,
+ front,
+ back,
+ before,
+ after,
+ insertBefore,
+ insertAfter
})
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-13 20:10:01 +0000