🇧🇷 🇺🇸. Passionate about programming and building things.
Published
Edited
Sep 17, 2019
Importers
md`# Animation Utils`
md`This contains some shareable controls for building animations. See https://observablehq.com/@observablehq/introduction-to-imports on how to import them into another notebook.`
md`## Timer component`
md`This view can be used to control an animation that is a pure function of time (represented as a tick). The value is a counter since start was clicked. Clicking stop pauses the counter, reset sets the counter to 0`
timerComponent = render(({ useSetter }) => {
const [runningState, setRunningState] = useState(null);
const [counter, setCounter] = useState(0);
useEffect(() => {
if (runningState === 'running') {
requestAnimationFrame(() => setCounter(counter + 1));
}
});
useSetter(counter);
return jsx`
<span>
<button
name="start"
disabled=${runningState === 'running'}
onClick=${event => setRunningState('running')}>
Start
</button>
<button
name="stop"
disabled=${runningState !== 'running'}
onClick=${event => setRunningState('stopped')}
>Stop</button>
<button
name="reset"
disabled=${runningState == null}
onClick=${event => {
setRunningState(null);
setCounter(0);
}}
>Reset</button>
</span>
`
})
viewof timer = timerComponent
md`Value: ${timer}`
md`## Dependencies`
import {render, jsx, useEffect, useState, useRef} from "@kunigami/react"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
