diff options
| author | Saivan <savian@me.com> | 2018-05-15 15:03:28 +1000 |
|---|---|---|
| committer | Saivan <savian@me.com> | 2018-05-15 15:03:28 +1000 |
| commit | 685d53295dd005c6f513b6123d8cd3fb3e671c8a (patch) | |
| tree | dd764c50642f0a10d054bee862aa7698c8a10dcc /dirty.html | |
| parent | 8b80921347cc1c183d00f442877453aad22ff672 (diff) | |
| download | svg.js-685d53295dd005c6f513b6123d8cd3fb3e671c8a.tar.gz svg.js-685d53295dd005c6f513b6123d8cd3fb3e671c8a.zip | |
The timeline is now decoupled from the real time
This commit allows the timeline to exist independently of the actual
time. This will allow it to be used to seek through an animation
with relative ease. We also made some architectural changes to the
timeline to support this.
Changes
=======
- Refactored the runner into its own file without exposing it to the
user (changed the gulpfile)
- The timeline no longer depends on the current time
- The user can supply absolute times to queue events
- Some more methods have been integrated into the timeline
Diffstat (limited to 'dirty.html')
| -rw-r--r-- | dirty.html | 50 |
1 files changed, 36 insertions, 14 deletions
@@ -6,20 +6,20 @@ <title></title> <script type="text/javascript" src="dist/svg.js"></script> <script type="text/javascript" src="src/morph.js"></script> + <script type="text/javascript" src="src/runner.js"></script> <script type="text/javascript" src="src/timeline.js"></script> </head> <body style="background-color: #c7c7ff"> <!-- Making the svg --> <svg width=1000px height=1000px > - <rect x=50 y=100 width=200 height=100 stroke=white stroke-width=2 /> + <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 /> </svg> <!-- Modifying the svg --> <script> - -let rect = SVG('rect') +let rect = SVG('rect').hide() let {sin, PI: pi, round, sqrt} = Math function getColor(t) { @@ -30,17 +30,39 @@ function getColor(t) { return color } -rect.animate(2000) - .queue( - () => {rect.attr('fill', getColor(0))}, - t => rect.transform({scale: sqrt(t), rotate: 720 * t}) - ) - .animate(1500, 500, true) - .queue(()=> {}, t => rect.attr('fill', getColor(t))) - .animate(1000).move(200, 200).size(300, 300) - -// setTimeout(()=> { rect.animate().pause() }, 500) -// setTimeout(()=> { rect.animate().play() }, 2000) +// rect.animate(4000) +// .during(t => rect.transform({scale: sqrt(1 + t), rotate: 720 * t})) +// .after(500, ()=> {rect.attr('stroke', 'white')}) +// .queue(() => rect.attr('fill', getColor(0))) +// .animate(1500, 500, true) +// .queue(()=> {}, t => rect.attr('fill', getColor(t))) +// .animate(1000, true) +// .move(200, 200) +// .size(300, 300) + +// SVG.Animator.timeout(()=> { rect.animate().pause() }, 1000 - 10) +// SVG.Animator.timeout(()=> { rect.animate().play() }, 2000 - 10) + +for (let i = 0 ; i < 15; i++) { + for (let j = 0 ; j < 10; j++) { + + // Make the rect + let o = i + j + let rect = SVG('rect').clone().show() + .width(40).height(40) + .x(50 * i).y(50 * j) + .attr('fill', getColor(o * 0.1)) + + // Move the rect + let {cx, cy} = rect.bbox() + + // Animate the rect + rect.animate(3000, Math.random() * 2000) + .during(t => rect.transform({rotate: 720 * t, origin: [cx, cy]})) + .during(t => rect.attr('fill', getColor(o * 0.1 + t))) + } +} + </script> |