raf

What is raf?

The raf npm package provides a simple and efficient way to use requestAnimationFrame in web browsers, with polyfills for unsupported environments. It's primarily used for creating smooth animations and handling frame-based updates in web applications.

What are raf's main functionalities?

Basic Animation Loop

This demonstrates how to create a basic animation loop using raf. The `raf` function is called with a callback function (`tick`), which will be executed before the next repaint. The `tick` function then calls `raf` with itself to continue the loop.

var raf = require('raf');
raf(function tick() {
  // Animation or frame update logic here
  raf(tick);
});

Canceling an Animation Frame

This example shows how to schedule an animation frame and then cancel it. The `raf` function returns a handle that can be used with `raf.cancel` to prevent the scheduled callback from executing.

var raf = require('raf');
var handle = raf(function() {
  // Animation or frame update logic here
});
// Cancel the scheduled frame update
raf.cancel(handle);

Other packages similar to raf

animation-frame

Provides a similar functionality to raf for managing animation frames, but it includes additional features for managing the timing and sequencing of multiple animations, which might make it a better choice for complex animations.

README

raf

reqeustAnimationFrame polyfill for browserify.

var raf = require('raf')
  , canvas = document.getElementById('opengl')

raf(canvas)
  .on('data', function(dt) {
    console.log('difference in time is '+dt+'ms')
  })

API

raf([optional element], [optional tick function]) -> event emitter

returns a event emitter that immediately starts emitting 'data' events representing animation frames for a given element (or for the entire window, if no element is passed).

if you pass a function as the first or second argument it will get called on every tick. this is a convenience method for the example above that binds to the data event, e.g. raf().on('data', tickFunction) is the same as raf(tickFunction) or raf(el, tickFunction)

ee.pause() / ee.resume()

pauses or resumes the events coming out of ee.

the dt on the next event after a resume will represent the difference between the last rendered frame and the newest frame.

raf.polyfill

the polyfilled requestAnimationFrame function.

license

MIT