What does the animation duration in frames mean?

Question

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 ?

Jazzepi · Accepted Answer · 2015-12-06T20:39:27.020

4

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);

edited Dec 06 '15 at 20:39

answered Dec 06 '15 at 19:51

Jazzepi

5,259
11
55
81

so it will not adapt to the screens refresh-rate, but slow it down to 30 whenever possible?! – CoderPi Dec 06 '15 at 19:55
@Jazzepi http://jsfiddle.net/gg0h2n0u/ the code provided at MSN does absolutly nothing ! – Alexander Solonik Dec 06 '15 at 20:16
1

@AlexanderSolonik It does actually update the left position value. I included a link to a modified version of your fiddle to show it animating some text. – Jazzepi Dec 06 '15 at 20:42
@CodeiSir I'm not an expert in this area, but I think the underlying idea is that you tell the OS your target framerate and it does it's best to match that. It also prevents you from doing a bunch of extraneous draws. There's a decent bit of information here. http://www.createjs.com/tutorials/Animation%20and%20Ticker/ Scroll down to the "Timiing Modes" section. This is for EasleJS but it has an option to use requestAnimationFrame under the hood. – Jazzepi Dec 06 '15 at 20:46
@Jazzepi so in the fiddle example that you provided , suppose i say : `element.style.left = '500px';` then before the element reachs 500px to the left, the function `window.requestAnimationFrame(step);` is called .. is that right ? – Alexander Solonik Dec 16 '15 at 08:37

CoderPi · Answer 2 · 2015-12-06T19:55:36.070

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)

What does the animation duration in frames mean?

2 Answers2