svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.14k stars 1.08k forks source link

Documentation Error / Bug with creating runners #1109

Closed gabenodarse closed 4 years ago

gabenodarse commented 4 years ago

Under the documentation here: https://svgjs.com/docs/3.0/animating/#svg-runner

Trying to create an animation I can step through manually. Following the documentation I tried to create a runner:

var runner = new SVG.Runner(1000);
console.log(runner.duration());

The log says 0. Running SVG.Runner with no params says 400, running with a number param a.k.a new SVG.Runner(1000); says the number.

The Runner constructor in my svg.js (release 3.0.16) only seems to set the duration on a number constructor. Relevant section:

9211 function Runner(options) {
...
9229    _this._duration = typeof options === 'number' && options;

I could not find out how to change the duration of a runner outside of the constructor (is creating a new runner each time the way to go?). I tried runner.duration(1000) and runner.time(1000).

gabenodarse commented 4 years ago

It's more than likely I'm just misunderstanding runners. Regardless of the duration, when I call runner.step(100); (for instance), the graphic is not updated.

Fuzzyma commented 4 years ago

You either pass a number to the runner constructor or a Controller (or function which is converted to a controller). You cannot change the duration of a runner after it has been created (why would you tho).

The log says 0. Running SVG.Runner with no params says 400, running with a number param a.k.a new SVG.Runner(1000); says the number.

When you create a Runner with new Runner(1000), duration() should return 1000.

It's more than likely I'm just misunderstanding runners. Regardless of the duration, when I call runner.step(100); (for instance), the graphic is not updated.

You can have a look at the spec folder in the current master and look for the Runner step function to see an example. Ofc you need to set the element on the runner and queue an actual animation (e.g. with move(10, 10)

// EDIT: There is indeed a mistake in the docs were is says that {duration: 1000} would be allowed. That is NOT the case