es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar la duración de la animación sin reiniciar en framer-motion.

14 Jul, 2023 Programación

Estoy intentando ralentizar una animación infinita usando framer-motion cambiando el valor de duración en la propiedad de transición. Estoy utilizando el hook useMotionValue y la función animate:

const [count, setCount] = useState(1);

const scale = useMotionValue(1);

React.useEffect(() => {
  // el [1, 2] es para [desde, hasta]
  const controls = animate(scale, [1, 2], {
    repeat: Infinity,
    ease: "linear",
    duration: count
  });

  return controls.stop;
}, [scale, count]);

El problema aquí es que mi animación se reinicia desde el principio.

Si no establezco ningún valor de desde (animate(scale, 2, ...)), no se reinicia, pero el principio en la siguiente repetición será el último valor justo antes de que cambie la duración.
(por ejemplo, si reinicio cuando el valor de scale es 1.5, mi animación se repetirá entre 1.5 y 2 en lugar de entre 1 y 2)

He creado un ejemplo aquí: https://codesandbox.io/s/framer-motion-simple-animation-forked-n8pbb?file=/src/index.tsx

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ralentizar una animación infinita utilizando Framer Motion cambiando el valor de duración en la propiedad de transición, puedes usar la propiedad from en el objeto de transición para establecer el valor inicial de la animación.

    En el ejemplo de código proporcionado, dado que el valor from no está establecido, la animación se reinicia desde el principio cuando el valor de duración cambia. Para evitar esto, puedes establecer el valor from al valor actual del valor de movimiento de escala.

    Aquí tienes un ejemplo de código actualizado con la propiedad from establecida como el valor actual del valor de movimiento de escala:

    const [count, setCount] = useState(1);

const scale = useMotionValue(1);

React.useEffect(() => {
  // establecer el valor from como el valor actual del valor de movimiento de escala
  const controls = animate(scale, [1, 2], {
    repeat: Infinity,
    ease: "linear",
    duration: count,
    from: scale.get()
  });

  return controls.stop;
}, [scale, count]);

    Con este cambio, la animación comenzará desde el valor actual del valor de movimiento de escala y continuará suavemente cuando el valor de duración cambie, sin reiniciarse desde el principio.

Comments are closed.