You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
850 B
38 lines
850 B
16 hours ago
|
import {
|
||
|
|
useSharedValue,
|
||
|
|
useAnimatedStyle,
|
||
|
|
withSequence,
|
||
|
|
withTiming,
|
||
|
|
} from 'react-native-reanimated';
|
||
|
|
|
||
|
|
type UseBounceOptions = {
|
||
|
|
amplitude?: number; // 최대 위/아래 이동량(px)
|
||
|
|
duration?: number; // 전체 지속시간(ms)
|
||
|
|
};
|
||
|
|
|
||
|
|
export function useBounce({ amplitude = 16, duration = 200 }: UseBounceOptions = {}) {
|
||
|
|
const y = useSharedValue(0);
|
||
|
|
|
||
|
|
const style = useAnimatedStyle(
|
||
|
|
() => ({
|
||
|
|
transform: [{ translateY: y.value }],
|
||
|
|
}),
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
const trigger = () => {
|
||
|
|
'worklet';
|
||
|
|
const d = duration;
|
||
|
|
const A = amplitude;
|
||
|
|
y.value = 0;
|
||
|
|
y.value = withSequence(
|
||
|
|
withTiming(-A, { duration: d * 0.3 }),
|
||
|
|
withTiming(A * 0.25, { duration: d * 0.3 }),
|
||
|
|
withTiming(-A * 0.5, { duration: d * 0.2 }),
|
||
|
|
withTiming(0, { duration: d * 0.2 })
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return { style, trigger, y };
|
||
|
|
}
|