Animación de lista de Framer Motion

Answer

1. 

   davy.ai

   July 28, 2023 at 3:06 am

   Tutorial sobre la implementación de animaciones deslizantes en Framer Motion para tu aplicación de lista de tareas

   ¡Hola! Has llegado al lugar correcto para obtener ayuda en la implementación de animaciones deslizantes en tu aplicación de lista de tareas. Framer Motion es una gran herramienta para lograr animaciones suaves en React. ¡Así que empecemos!

   Instalación

   Para instalar Framer Motion en tu proyecto, utiliza el siguiente comando en tu terminal:

   npm install framer-motion
   

   Configuración de la animación

   Primero, necesitarás importar motion de Framer Motion para envolver tu componente de elementos de la lista de tareas. Luego, define las variantes para tu animación, es decir, los diferentes estados que puede tener tu componente. Para animaciones de deslizamiento hacia arriba y hacia abajo, puedes definir dos variantes: completado y noCompletado.

   Aquí tienes un ejemplo:

   import { motion } from 'framer-motion';
   
   const variants = {
     noCompletado: { y: 0, opacity: 1 },
     completado: { y: 20, opacity: 0.5 }
   }
   
   const ElementoListaTareas = ({titulo, estaCompletado}) => {
     return (
       <motion.div initial="noCompletado" animate="{estaCompletado" "completado"="" :="" "nocompletado"}="" variants="{variants}" transition="{{" type:="" "spring",="" stiffness:="" 200,="" damping:="" 30="" }}="">
         {titulo}
       </motion.div>
     )
   }
   

   Aquí, hemos definido dos variantes: noCompletado, que tiene un valor y de 0 y una opacidad de 1, y completado, que tiene un valor y de 20 y una opacidad de 0.5. Puedes ajustar estos valores para lograr el efecto de animación deseado.

   Las propiedades initial y animate se utilizan para especificar las variantes inicial y objetivo del componente de movimiento. Usamos un operador ternario para verificar si la tarea está completada o no para alternar entre las dos variantes.

   La propiedad transition determina cómo se comporta la animación. En este ejemplo, hemos utilizado un movimiento de tipo resorte que se siente más natural que uno lineal.

   Mantener la animación sincronizada con los cambios de estado

   Para mantener la animación sincronizada con el cambio de estado, puedes generar un nuevo renderizado cada vez que una tarea se marque como completada o no. Puedes lograr esto pasando una función de devolución de llamada como una propiedad a tu componente de lista de tareas que actualice el estado de la tarea y genere un nuevo renderizado.

   Aquí tienes un ejemplo:

   const ListaTareas = () => {
     const [tareas, setTareas] = useState([{titulo: "Comprar leche", estaCompletado: false}, {titulo: "Hacer la colada", estaCompletado: true}])
   
     const manejarTareaCompletada = (indice) => {
       const tareasActualizadas = [...tareas]
       tareasActualizadas[indice].estaCompletado = !tareasActualizadas[indice].estaCompletado
       setTareas(tareasActualizadas)
     }
   
     return (
       <div>
         {tareas.map((tarea, indice) => (
           <elementolistatareas key="{indice}" titulo="{tarea.titulo}" estacompletado="{tarea.estaCompletado}" oncompletar="{()" ==""> manejarTareaCompletada(indice)}
           />
         ))}
       </elementolistatareas></div>
     )
   }
   

   Aquí, pasamos la función manejarTareaCompletada como una función de devolución de llamada al componente ElementoListaTareas.

   En la función manejarTareaCompletada, creamos una nueva copia del array de tareas y alternamos la propiedad estaCompletado de la tarea seleccionada. Luego, actualizamos el estado de las tareas con el nuevo array, lo que genera un nuevo renderizado.

   Cuando el componente ElementoListaTareas recibe la propiedad onCompletar, la pasa al componente de botón. Cuando se hace clic en el botón, se llama a la función onCompletar, que a su vez actualiza el estado de la tarea.

   ¡Y eso es todo! Has implementado con éxito animaciones deslizantes utilizando Framer Motion en tu aplicación de lista de tareas. ¡Buena suerte con tu proyecto!

Comments are closed.