https://github.com/component/raf

requestAnimationFrame
https://github.com/component/raf

Last synced: 12 days ago
JSON representation

requestAnimationFrame

• Host: GitHub
• URL: https://github.com/component/raf
• Owner: component
• Created: 2012-10-07T15:57:37.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2022-09-15T02:19:06.000Z (over 2 years ago)
• Last Synced: 2024-12-09T01:38:57.117Z (19 days ago)
• Language: JavaScript
• Size: 8.79 KB
• Stars: 35
• Watchers: 5
• Forks: 16
• Open Issues: 4
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# raf

  request animation frame

## Installation

    $ component install component/raf

## Example

  Request the animation frame with `raf(fn)`, cancel with `raf.cancel(id)`.

```js

var x = 0;

var y = 50;

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var raf = require('raf');

function animate() {

  raf(animate);

  draw();

}

var prev = Date.now();

function draw() {

  var curr = Date.now();

  var diff = curr - prev;

  var p = diff / 16;

  ctx.clearRect(0, 0, 900, 300);

  ctx.beginPath();

  ctx.globalAlpha = .5;

  ctx.arc(x, y, 10, 0, Math.PI * 2, false);

  ctx.fill();

  x += 2;

  y += Math.sin(x/20) * 5;

  prev = curr;

}

animate();

```

## License

  MIT