Skip to content

EXPERIMENTAL: Animation frames stream for @most/core

Notifications You must be signed in to change notification settings

mostjs/x-animation-frame

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status

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())

About

EXPERIMENTAL: Animation frames stream for @most/core

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published