widdershin / cycle-animation-driver

A Cycle driver for requestAnimationFrame

---

cycle-animation-driver

A Cycle driver for requestAnimationFrame

Installation

npm install cycle-animation-driver --save

Usage

cycle-animation-driver uses requestAnimationFrame to provide an Observable stream of timestamps, as fast and smooth as the browser will allow. You can access both the current time with timestamp, and also the delta (difference since last update).

import {run} from '@cycle/core';
import {makeDOMDriver, div} from '@cycle/dom';
import {makeAnimationDriver} from 'cycle-animation-driver';

function main ({DOM, animation}) {
  return {
    DOM: animation.pluck('timestamp').map(timestamp => div('.time', timestamp.toString()))
  }
}

const drivers = {
  DOM: makeDOMDriver('.app'),
  animation: makeAnimationDriver()
}

run(main, drivers);

Example

Check out the live example at widdersh.in/cycle-animation-driver.

The source code for that example can be found here.

cycle-animation-driver's Issues

Provide deltatime!

Add interval function

Currently using things like Observable.interval is not great if you want to use cycle-restart, as time is actually a side effect and should come from drivers.

To that end, it would be very useful to implement an interval call, something like:

function main({Animation}) {
  const interval$ = Animation.interval(1000);
}

I would love help, and am happy to support anyone who wants to take a crack at this.

Support older browsers that use prefixed requestAnimationFrame

Something along the lines of:

const rAF = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

Having trouble right now because of the hack I did to avoid having to run the tests in the browser, pull requests welcome.

Integrate markdown-doctest

Waiting on Widdershin/markdown-doctest#19

Make Pong (and record it)