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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
import { useSpring, animated, easings } from '@react-spring/web';
import React, { useEffect, useState } from 'react';
interface Props {
friction: number;
tension: number;
mass: number;
children: React.ReactNode;
}
export default function SpringAnimationPreview({ friction, tension, mass, children }: Props) {
const [springs, api] = useSpring(
() => ({
from: {
x: 0,
y: 0,
opacity: 1,
scale: 1,
},
config: {
tension: tension,
friction: friction,
mass: mass,
},
onStart: () => {
// console.log('started');
},
onRest: () => {
// console.log('resting');
},
}),
[tension, friction, mass]
);
// Whether the animation is currently playing
const [animating, setAnimating] = useState(false);
const bounceConfig = {
from: {
x: -50,
y: 0,
},
to: [
{
x: 50,
y: 0,
config: {
tension: tension,
friction: friction,
mass: mass,
},
},
{
x: -50,
y: 0,
config: {
duration: 500,
easing: easings.easeInOutCubic,
},
},
],
};
const animate = () => {
api.start(bounceConfig);
};
useEffect(() => {
animate();
}, []);
return (
<div
style={{
width: '200px',
height: '150px',
borderRadius: '4px',
border: '1px solid #696969',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
onPointerEnter={() => {
animate();
}}>
<animated.div
style={{
...springs,
}}>
{children}
</animated.div>
</div>
);
}
|
