Anime: Library independence.

[trusktr]

Currently anime.js creates it's own animation loop with requestAnimationFrame, which makes it undesirable to add anime.js to an existing project that has it's own loop in which it produces it's own time stamps.

For example, suppose we have a game that makes it's own loop (with requestAnimationFrame, or something else in some other JS engine...). In order for anime.js to be integrated into that custom loop, it would be nice for anime.js API to accept a timestamp that was created outside of anime.js.

For a real-world example of an API that is independent in this fashion and can be placed into any existing animation/game loop, see Tween.js. Note in particular the .update() method of the Tween class.

---

But! it would also be nice if the anime.js API was able use requestAnimationFrame in cases where the developer doesn't already have their own loop. That's something both anime.js and tween.js don't do yet, which would be nice (having both forms of API for both crowds somehow)!

[SaulDoesCode]

perhaps a helper function could be exposed to be run with in an external opt-in loop as you suggest.
Inside the requestAnimationFrame is abstracted into an engine object. It would not be hard to make the actual content that needs to be looped into a single function and either run it in the default engine.play(); but expose it via maybe anime.update() using getter that would automagically swap to the external loop. Only problem is that all the animations run in a single requestAnimationFrame one would have to abstract some more to make the exposed looper function run only the desired animation otherwise it might get complicated.
This is the internal requestAnimationFrame loop.

  var engine = (function() {
    var play = function() { raf = requestAnimationFrame(step); };
    var step = function(t) {
      if (animations.length) {
        for (var i = 0; i < animations.length; i++) animations[i].tick(t);
        play();
      } else {
        cancelAnimationFrame(raf);
        raf = 0;
      }
    }
    return play;
  })();

  // one could add very over simplified function to simply take over engine internally
 Object.defineProperty(animation, 'update',{
        get : function() {
                engine.stop(); // engine.stop would have to be implemented but isn't too hard
                return function(t) {
                     if (animations.length) for (var i = 0; i < animations.length; i++) animations[i].tick(t);
                 }
          }
});
// then use it in your own looping system as 
anime.update(yourTick);

I'm going to play around with the concept and see what is possible. I maintain a fork of anime here

[ngokevin]

You can tell anime to not make an RAF.

Set autoplay: false and use .tick(t) https://github.com/ngokevin/aframe-animation-component/blob/master/index.js#L78

[ngokevin]

Actually, looks like that tick() I had was a no-op :/

[juliangarnier]

Maybe myAnimation.seek(); can do the trick?
But it's limited, and will not works with loop animations:

var myAnimation = anime({
  targets: 'div',
  rotate: 180,
  autoplay: false
});

var raf = 0;
var speed = .5;
var loop = function() {
  myAnimation.seek(raf * speed);
  raf = requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

An other option is to use anime as your main RAF:

var gameLoop = anime({
  update: function() {
    // Do stuff
  },
  duration: Infinity
});

[ngokevin]

Working on A-Frame, a WebVR framework. Just looking for a way to hook into the existing game loop (without introducing anime into the core library), and a way for anime to not create any requestAnimationFrames. Like tween's global TWEEN.tick method.

Thanks for the library though! It exploded. If I get around to it, I can see if I can help out.

[rohan-deshpande]

Understand that this is closed, but this would be an excellent feature, I'm currently using anime in my threejs powered game engine but I am about to consolidate all raf calls into the game loop and, if I understand correctly, this is impossible with anime. A real shame because I wouldn't like to drop anime if I didn't have to. Once I do the consolidation I'll have a look under the hood and see what I can do.