diff --git a/dev/examples/useSpring.tsx b/dev/examples/useSpring.tsx index 79e0fe76f9..963b67b5e0 100644 --- a/dev/examples/useSpring.tsx +++ b/dev/examples/useSpring.tsx @@ -4,35 +4,18 @@ import { useEffect, useRef, useState } from "react" const spring = { stiffness: 300, damping: 28, - restDelta: 0.001, - restSpeed: 0.001, -} - -const useMousePosition = () => { - const [mousePosition, setMousePosition] = useState({ x: null, y: null }) - - const updateMousePosition = (e) => { - setMousePosition({ x: e.clientX, y: e.clientY }) - } - - useEffect(() => { - window.addEventListener("mousemove", updateMousePosition) - - return () => - window.removeEventListener("mousemove", updateMousePosition) - }, []) - - return mousePosition + restDelta: 0.00001, + restSpeed: 0.00001, } function DragExample() { const dragX = useMotionValue(0) const dragY = useMotionValue(0) - const x = useSpring(dragX) + const x = useSpring(dragX, spring) const y = useSpring(dragY, spring) return ( { + setMousePosition({ x: e.clientX, y: e.clientY }) + }) + const size = 40 const ref = useRef(null) - console.log(x) + return ( { + window.addEventListener( + "mousemove", + updateMousePosition.current + ) + }} + onTap={() => { + window.removeEventListener( + "mousemove", + updateMousePosition.current + ) + }} + onTapCancel={() => { + window.removeEventListener( + "mousemove", + updateMousePosition.current + ) + }} > Rerender @@ -69,15 +75,15 @@ function RerenderExample() { function MouseEventExample() { const xPoint = useMotionValue(0) const yPoint = useMotionValue(0) - const x = useSpring(xPoint, spring) - const y = useSpring(yPoint, spring) + const x = useSpring(0, spring) + const y = useSpring(0, spring) const ref = useRef(null) const onMove = useRef<(event: MouseEvent) => void>( ({ clientX, clientY }: MouseEvent) => { const element = ref.current! - xPoint.set(clientX - element.offsetLeft - element.offsetWidth / 2) - yPoint.set(clientY - element.offsetTop - element.offsetHeight / 2) + x.set(clientX - element.offsetLeft - element.offsetWidth / 2) + y.set(clientY - element.offsetTop - element.offsetHeight / 2) } ) @@ -92,7 +98,7 @@ function MouseEventExample() { return ( (value.get()) + const latestSetter = useRef<(v: number) => void>(() => {}) + + const startAnimation = () => { + /** + * If the previous animation hasn't had the chance to even render a frame, render it now. + */ + const animation = activeSpringAnimation.current + + if (animation && animation.time === 0) { + animation.sample(frameData.delta) + } + + stopAnimation() + + activeSpringAnimation.current = animateValue({ + keyframes: [value.get(), latestValue.current], + velocity: value.getVelocity(), + type: "spring", + restDelta: 0.001, + restSpeed: 0.01, + ...config, + onUpdate: latestSetter.current, + }) + } const stopAnimation = () => { if (activeSpringAnimation.current) { @@ -54,25 +79,10 @@ export function useSpring( */ if (isStatic) return set(v) - /** - * If the previous animation hasn't had the chance to even render a frame, render it now. - */ - const animation = activeSpringAnimation.current - if (animation && animation.time === 0) { - animation.sample(frameData.delta) - } - - stopAnimation() + latestValue.current = v + latestSetter.current = set - activeSpringAnimation.current = animateValue({ - keyframes: [value.get(), v], - velocity: value.getVelocity(), - type: "spring", - restDelta: 0.001, - restSpeed: 0.01, - ...config, - onUpdate: set, - }) + frame.update(startAnimation) return value.get() }, stopAnimation)