1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { useCallback, useState } from 'react';
import type { NextPage } from 'next';
import { Form, Toggle } from 'react-daisyui';
import { Page, Container, Canvas, Toolbar } from 'components/content';
import { View, Layer, Rectangle } from 'react-paper-bindings';
const AnimationsPage: NextPage = () => {
const [animating, setAnimating] = useState(true);
const [rotation, setRotation] = useState(0);
const [position, setPosition] = useState([75, 50]);
const [forward, setForward] = useState(true);
const handleFrame = useCallback(() => {
const [x, y] = position;
if (y >= 150) setForward(false);
if (y <= 50) setForward(true);
setPosition([x, y + (forward ? 3 : -3)]);
setRotation(rotation < 360 ? rotation + 3 : 0);
}, [position, rotation, forward]);
return (
<Page title="Animations">
<Container>
<Toolbar>
<Form.Label title="Animate" className="inline-flex mb-4">
<Toggle
className="ml-1"
checked={animating}
onChange={() => setAnimating(!animating)}
/>
</Form.Label>
</Toolbar>
<Canvas>
<View onFrame={animating ? handleFrame : null}>
<Layer>
<Rectangle
center={position}
fillColor={'orange'}
size={[50, 50]}
/>
<Rectangle
center={[225, 100]}
fillColor={'blue'}
size={[75, 75]}
rotation={rotation}
/>
</Layer>
</View>
</Canvas>
</Container>
</Page>
);
};
export default AnimationsPage;