CODEWITHSUNDEEP
javascriptcsssvgcss-animationsvivus
Alexander Solonik
Alexander Solonik

Reputation: 10230

What does the animation duration in frames mean?

I have been using vivus.js for tiny svg animations for a while now , now this plugin has the following initialization format:

new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);

dead simple to use , now my question is about the duration: 200 parameter. see the documentation for it HERE. Now whenever i use jquery and other librarys etc 1000 means 1 secound , but here what is 200 is not very clear , the documentation says the followning:

duration :: Animation duration, in frames. [Default: 200].

Now what exactly is animation duration in frames supposed to mean ? what is 200 really here 2000 ?

Upvotes: 1

Views: 506

Answers (2)

Jazzepi
Jazzepi

Reputation: 5480

Under the hood vivus is using requestAnimationFrame so it deals in frames instead of milliseconds.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

https://github.com/maxwellito/vivus/issues/72

From the above link You can keep in mind an average score of 30 frames per second and adapt your instance with it.

The code located at the mozilla link does work, it just doesn't show anything visual (at least in jfiddle).

Here's a working example that shows movement.

http://jsfiddle.net/4ej3Legg/

HTML

<div id="anim">
  <span id="blah">asdasf</span>
</div>

Javascript

var start = null;
var element = document.getElementById("blah");

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.position = "absolute";
  element.style.left = Math.min(progress / 10, 500) + "px";
  if (progress < 100000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

Upvotes: 4

CoderPi
CoderPi

Reputation: 13211

What you mean by "whenever i use jQuery and other librarys etc 1000 means 1" are milliseconds, wich are part of seconds.

Frames are a different concept. It's a discrete time management (steps). You will have a certain amount of frames per second "fps".

You be able to set the speed of the frames with:

play(speed) Plays the animation with the speed given in parameter. This value can be negative to go backward, between 0 and 1 to go slowly, or superior to 1 to go fast. [Default: 1 ]

I can't find anywhere on the Internet how many frames per second a speed of 1 will be, but you can just test it. Might be 100. About 30 Frames per second (from Jazzepi's answer)

Upvotes: 1

Related Questions