EXPERIMENTAL This is an experimental package.

@most/animation-frame

Create a stream of animation frames.

Get it

npm i @most/animation-frame --save

yarn add @most/animation-frame

Types

export type DOMHighResTimeStamp = number

export type AnimationFrameHandler = DOMHighResTimeStamp => void

export type AnimationFrameRequest = number

export type AnimationFrames = {
  requestAnimationFrame: AnimationFrameHandler => AnimationFrameRequest,
  cancelAnimationFrame: AnimationFrameRequest => void
}

Note that window satisfies the AnimationFrames type, so you can pass window to the API methods below.

API

nextAnimationFrame :: AnimationFrames → Stream DOMHighResTimeStamp

Create a stream containing only the next animation frame.

animationFrames :: AnimationFrames → Stream DOMHighResTimeStamp

Create an infinite stream containing all future animation frames. This can be used to efficiently update a UI on each animation frame. Use take, until, etc. to make the stream finite if you need.

import { animationFrames } from '@most/animation-frame'
import { tap, sample, runEffects } from '@most/core'
import { newDefaultScheduler } from '@most/scheduler'

const afs = animationFrames(window)
const applicationUpdates = createApplicationUpdatesStream()

// Sample updates at each animationFrame and render the UI
const render = tap(renderUpdates, sample(applicationUpdates, afs))

runEffects(render, newDefaultScheduler())