Tengo una animación de rotación simple de resorte de reacción con velocidad ajustable. Pero una vez que configuré la velocidad al máximo (configuré la duración en 10 ms) y la devolví a menos de 1 segundo, no se animaba correctamente y más bien se retrasaba.

Aquí está la vista previa de la animación https://3l3kb.csb.app/

Y aquí está la caja de arena https://codesandbox.io/s/spring-anim-test-forked-6wno4

Y aquí está el código

 export default function App() { const [reverse, setReverse] = useState(false); const [speed, setSpeed] = useState(50); const rotation = useSpring({ from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" }, loop: true, reset: true, config: { duration: 10 + (100 - speed) * 10 } }); return ( <div className="App"> <h1>Hello CodeSandbox</h1> {/* <animated.div> <animated.h1>{num.get().toFixed(2)}</animated.h1> </animated.div> */} <div style={{ width: "300px", height: "300px", position: "relative", margin: "auto" }} > <animated.div style={{ ...{ ...rotation, marginLeft: "auto", position: "absolute", color: "purple", fontSize: "130px" } }} > T </animated.div> </div> <input type="range" value={speed} onChange={(e) => setSpeed(e.target.value)} style={{ marginTop: "100px", width: "500px" }} /> </div> ); }