-
-
Notifications
You must be signed in to change notification settings - Fork 1k
/
useAnimatedArc.ts
28 lines (25 loc) · 911 Bytes
/
useAnimatedArc.ts
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
import { useSpring } from 'react-spring'
import { useMotionConfig } from '@nivo/core'
import { Arc, ArcGenerator } from './types'
import { interpolateArc } from './arcInterpolator'
export const useAnimatedArc = (datumWithArc: { arc: Arc }, arcGenerator: ArcGenerator) => {
const { animate, config: springConfig } = useMotionConfig()
const animatedValues = useSpring({
startAngle: datumWithArc.arc.startAngle,
endAngle: datumWithArc.arc.endAngle,
innerRadius: datumWithArc.arc.innerRadius,
outerRadius: datumWithArc.arc.outerRadius,
config: springConfig,
immediate: !animate,
})
return {
...animatedValues,
path: interpolateArc(
animatedValues.startAngle,
animatedValues.endAngle,
animatedValues.innerRadius,
animatedValues.outerRadius,
arcGenerator
),
}
}