Overview

Miso.Subscription.RAF provides rAFSub, a subscription that hooks into the browser's requestAnimationFrame loop. On each frame the browser calls back with a DOMHighResTimeStamp (milliseconds since page load, sub-millisecond precision), which is forwarded to the component as an action.

This is the recommended driver for canvas-based animations and games because the browser throttles the callback to the display refresh rate (typically 60 fps) and pauses it automatically when the tab is hidden.

Quick start

import Miso
import Miso.Subscription.RAF
import Miso.Canvas

data Action = Tick Double   -- DOMHighResTimeStamp in ms

myComponent = (component model update view)
  { subs   = [ rAFSub Tick ]
  , events = defaultEvents
  }

update :: Action -> Effect p props Model Action
update (Tick t) = do
  modify (\m -> m { time = t })

Lifecycle

Internally rAFSub uses createSub:

• Acquire — schedules the first requestAnimationFrame callback, which re-schedules itself on every invocation.
• Release — calls freeFunction to cancel the callback and release the JS reference when the component unmounts.

See also

• Miso.Canvas — canvas drawing API driven by rAFSub ticks
• Miso.Subscription.Util — createSub
• Miso.Subscription — re-export hub