Digamos que tengo una animación de fotogramas clave simple para mover un cuadro de izquierda a derecha:
@keyframes mymove { 0% { left: 0px; } 20% { left: 200px; } 100% { left: 250px; } }¿Hay alguna forma de controlar esta animación con un control deslizante que va del 0 al 100 % en React? Es decir, la animación siempre debe representar el estado del control deslizante. Si el control deslizante se mueve del 20 % al 40 %, la animación también debe moverse del 20 % al 40 % durante ese tiempo.
Sí, sé que ese no es el propósito previsto de las animaciones de fotogramas clave, pero me gustaría encontrar una manera de todos modos.
Aquí hay un enlace de CodeSandbox: https://codesandbox.io/s/keyframe-experiment-96x5qy
Puede hacerlo con el cambio de accesorios de estilo en el box sin keyframes
Tenga en cuenta que estoy usando el porcentaje para calcular la posición left , si desea que se mueva más, puede modificar left: progress + "px" con su propio cálculo
import { useState } from "react"; import "./styles.css"; export default function App() { const [progress, setProgress] = useState(0); return ( <div> <h1>Progress: {progress}%</h1> <div class="box" style={{ left: progress + "px" }}></div> <input type="range" min="0" max="100" value={progress} step="1" onInput={(e) => setProgress(e.target.value)} /> </div> ); }La modificación de estilo
.box { width: 100px; height: 100px; background: red; position: relative; transition: left 1s; /*Added transition*/ }Es difícil hacerlo como uno quiere...
En caso de que solo desee detener el fotograma clave mientras mueve el control deslizante de rango, intente esto: sanbox
CSS:
.box { width: 100px; height: 100px; background: red; position: relative; } .animate { animation: mymove 5s infinite; }Aplicación.js:
export default function App() { const [progress, setProgress] = useState(0); const [moving, setMoving] = useState(false); return ( <div> <h1>Progress: {progress}%</h1> <p>is moving: {moving ? "true" : "false"}</p> <div className={`box ${!moving && "animate"}`} style={{ left: `${progress}px` }} ></div> <input type="range" min="0" max="100" value={progress} step="1" onInput={(e) => { setMoving(true); setProgress(e.target.value); }} onMouseUp={() => setMoving(false)} /> </div> ); }Después del evento mouseUp en el control deslizante de rango, la animación de fotogramas clave comienza de nuevo (desde el 0%). También puede definir fotogramas clave como CSS en JS y cambiar los valores según la posición actual del control deslizante para iniciar la animación desde el lugar donde se movió el cuadro.