Animation

useStopwatch allows you to start and stop a real-time clock for doing neat things like physics simulations.

Pass startTime (defaults to 0) or endTime (defaults to Infinity) to constrain the stopwatch.

Work in progress

Animation is quite underdeveloped in this library both from a performance and feature standpoint. It could use things like keyframing, easing, and sequencing.

Make suggestions on GitHub

import * as React from "react"
import { Mafs, Point, Coordinates, useStopwatch } from "mafs"

function AnimatedPoint() {
  const { time, start } = useStopwatch()

  // Stopwatches are stopped initially, so we
  // can start it when the component mounts.
  // We declare `start` as a dependency of the
  // effect to make React happy, but Mafs
  // guarantees its identity will never change.
  React.useEffect(() => start(), [start])

  return (
    <Mafs>
      <Coordinates.Cartesian />
      <Point
        x={Math.cos(time * 2 * Math.PI)}
        y={Math.sin(time * 2 * Math.PI)}
      />
    </Mafs>
  )
}

Animation

👷‍♀️ Work in progress

Work in progress