AnimationCanvas

A simple animatable canvas with requestAnimationFrame()

Source

Import

import { AnimationCanvas } from '@tremolo-ui/react'

Features

• Adapt devicePixelRatio.
• Reduce flicking when resized.
• Observe the parent element's dimensions.
• Simple ticker and timer

API

ref: AnimationCanvasProps

Absolute Sizing vs Relative Sizing

Reactive Canvas

React.useState + animate={false}

CommonProps.animate

Examples

Basic

Loading...

function App() {
  return (
    <AnimationCanvas
      width={200}
      height={200}
      init={(ctx) => {
        ctx.font = '16px sans-serif'
      }}
      draw={(ctx, { width, height, count }) => {
        ctx.clearRect(0, 0, width, height)
        ctx.fillText(`frame: ${count}`, 0, 16)
        // draw sine wave
        const halfH = height / 2
        ctx.strokeStyle = '#29bbf0'
        ctx.beginPath()
        for (let i = 0; i < width; i++) {
          const y =
            halfH +
            halfH * 0.5 * Math.sin((4 * Math.PI * (i + count * 2)) / width)
          if (i == 0) ctx.moveTo(i, y)
          else ctx.lineTo(i, y)
        }
        ctx.stroke()
      }}
    />
  )
}

Save / Restore

Loading...