Botón con efecto ondulado de 15 minutos en React

1. Bienvenida y descripción del curso: Bienvenidos a este curso. En solo 15 minutos, aprenderás a crear una impresionante animación de repeler en un botón usando react Esto es lo que puede esperar de dos enfoques. Comenzaremos revisando rápidamente una versión básica que muestre la idea central. Al hacer clic en el botón, aparece un repeler. Luego nos sumergiremos en una versión avanzada que afina el efecto usando técnicas modernas de reacción y mejores prácticas. Aprendizaje basado en proyectos. No se trata de largas conferencias. Se llega directo al código con cada paso explicado claramente, para que pueda aplicarlo de inmediato. Primero consiste en enseñar. Yo mantengo las cosas breves y enérgicas para que no pierdas el tiempo. Recogerás habilidades del mundo real que podrás usar en tus propios proyectos. Al final, tendrás un botón interactivo ordenado y una comprensión más profunda animaciones de reacción que impulsarán tu kit de herramientas de desarrollo web. Vamos a saltar y crear algo increíble. 2. Configuración: crear una aplicación de React: Comience con una carpeta de proyecto vacía y use el código VS, un editor de código potente y fácil de usar. Primero, abre el terminal atlratd en código VS. Ahora crearemos nuestra app react usando el comando photon. Px, crea react app dot. El punto al final le dice a PX que cree la aplicación react dentro del directorio coreano en lugar de hacer una nueva carpeta, presione Enter y espere a que finalice la instalación. Este proceso configurará todo lo que necesitamos para comenzar a codificar y reaccionar. Muy bien, una vez que se complete la configuración, despejemos la terminal Ahora echemos un vistazo a la estructura de nuestro proyecto. En el Explorador de archivos, verás varios archivos y carpetas. El más importante por ahora son los puntos de aplicación. Aquí es donde ocurre la lógica principal de nuestra app. Para obtener una vista previa de nuestro proyecto en el navegador, ejecute NPM start. Esto abrirá una nueva ventana del navegador que muestra la página de bienvenida predeterminada de React. Organicemos nuestro proyecto creando un componente separado para nuestro botón. Dentro de la carpeta SFC, cree una nueva carpeta llamada components Después dentro de esa carpeta, crear un nuevo archivo, botón de llamada punto GSX Este será nuestro componente de botón personalizado, y en la siguiente lección, comenzaremos a construirlo paso a paso. 3. Preparación del componente del botón: Bien, este es nuestro proyecto listo para que podamos trabajar con él. He agregado el archivo CSS aquí y lo llamé botón Cool a CSS. Contiene los estilos CSS para nuestro componente cool button. Encontrarás este archivo en la sección de recursos con comentarios sobre lo que hace su propiedad CSS. Ahora comencemos a codificar nuestro componente de botón genial. Primero, importar reaccionar desde la Ley, luego importemos nuestros estilos desde el módulo CSS del botón Cool. Crea un botón de función genial con una C mayúscula y usa una función de flecha. La función devolverá un código GSX, que va a ser un elemento de botón con el texto, haga clic en M. Vamos a darle a nuestro botón el nombre de la clase Cool dash button, que encontrarás en el estudio archivo CSS, va a darle a nuestro botón un estilo cool e interactivo Ahora al final del archivo escriba Exportar botón cool default. Esto hará que el componente cool button reutilizable a lo largo de nuestro proyecto. Nuestro componente a renderizar, necesitamos usarlo dentro del archivo Abdo GS dentro de este elemento dev Asegúrate de haberlo importado así. Además, necesitamos editar la clase de app para este elemento dev para colocar el botón cool en el centro de la página. Entonces dentro del archivo CSS Abdo y dentro de la clase APCSS, agregue estas propiedades CSS, y deberían hacer el trabajo Ejecutemos esta app y veamos el resultado y stat el terminal un inicio NPM. Cuando se inicie el servidor local de House, la aplicación se renderizará dentro del navegador y verá nuestro botón cool en el medio de la página. Tiene un efecto cool hover y un efecto click con un hermoso fondo degradado y una bonita sombra que le da al botón un poco de profundidad Puedes consultar el archivo CSS en la sección de recursos donde encontrarás comentarios sobre lo que hace la clase CSS y la propiedad. Eso es todo para esta lección. Esto es solo preparación para el proyecto, y en el próximo par de lecciones nos sumergiremos en las cosas jugosas. Así que vamos a movernos. 4. Enfoque para principiantes: efecto básico de animación ondulada: Bien, aquí es donde dejamos nuestro botón de la lección anterior. Se ve bien, pero queremos hacerlo más fresco agregando el efecto ripple click. Primero, comenzaremos con la forma básica no tan avanzada de crear el efecto click. Entonces en la siguiente lección, te mostraré la forma correcta de hacer este tipo de efectos. Al conocer la forma básica y la forma avanzada de hacer las cosas, desarrollarás fuertes habilidades para resolver problemas, y ese es el objetivo final de esta clase. Empecemos. Primero, dentro del botón, crear elemento span justo debajo del texto click me. Esto actuará como nuestro efecto dominó cuando se haga clic en el botón Dale al span un nombre de clase de ripple. Esta clase se define dentro del archivo CSS cool button dot. Consulta los recursos para obtener información detallada sobre el código CSS. Vuelve a la ondulación y agrega un atributo de estilo. Dentro de este tema, agregaremos algunas propiedades para controlar la posición y el tamaño de la ondulación. Establezca la izquierda en cero, la parte superior a cero, la anchura al 100% y la alta al 100%. Ahora, cada vez que despliegas la página, puedes ver el efecto dominó en la parte inferior. Eso es porque cada vez que se carga el ritmo, el elemento ripple también se cargará con los estilos CSS, y cada vez que se carguen los estilos CSS, cualquier animación que tengamos se activará automáticamente. Y ese es el caso de nuestra animación ondulada aquí mismo. Lo que queremos es activar el efecto en cada evento click. Entonces, en el elemento button, agrega un atributo onclick y consígalo igual a handle click Por aquí, crea una función de clic de mango. Haga clic, activamos la animación de ondulación agregando y luego eliminando el span, una forma sencilla de ejecutar una animación. Para ello, usaremos un conjunto de estado de reacción animado a true. Por supuesto, necesitamos definir el estado por aquí, y usaremos el use state hug y estableceremos el estado inicial en false y port state from react. Ahora usaremos el estado animado para renderizar el span, envolver el span dentro de dos bases puramente y agregar la variable de estado animado así Esto le dirá a reaccionar que animo es cierto, luego renderizar el span. Si es falso, no renderices el span. Ahora guarda el código, y vamos a probar. Haga clic en el botón y se activará la animación pul. Pero si vuelves a hacer clic, no pasa nada porque no reiniciamos el estado animado para forzar Para tener este mecanismo de alternancia, venimos aquí y establecemos la función handle click y agregamos este tiempo de espera establecido, que espera 600 milisegundos, que es el rango de tiempo de animación definido dentro de la clase po CSS Después de 600 milisegundos, se activará la devolución de llamada y llamaremos a la función set animate, que restablecerá el estado animado para forzar Puede hacer clic varias veces en el botón y el efecto dominó se ejecutará cada vez. Pero como pueden ver, la animación no se ve bien, sobre todo cuando hago clic muy rápido. Encima de eso, queremos que las ondas comiencen desde la posición donde hicimos clic en el botón con el cursor del mouse Podemos hacerlo mejor que esto con una implementación de código más avanzada. En la siguiente lección, haremos que esta animación sea más suave y divertida de jugar, especialmente cuando sigue la posición de tu cursor. 5. Enfoque avanzado: técnicas profesionales de animación con ondas: El efecto de animación de rapel está funcionando, pero no del todo bien. No se ve bien. Actúa raro, y no es nada suave. Eso se debe a nuestra mala implementación de código. Entonces en esta lección, la arreglaremos. Créeme, va a ser súper fácil y divertido. Primero, eliminemos el código dentro de la función handle click. Elimine el estado de animación de aquí y de aquí también. Envolvamos nuestro manejador de clics en uso callback react hook para optimizar el rendimiento y evitar renderizaciones innecesarias. Agrega una interray al final así, lo que asegura que la función solo se cree una vez Asegúrese de importar el gancho de devolución de llamada us de react. Ahora va a cambiar la idea general de crear ondas Usaremos una matriz para rastrear múltiples hechos de ondulación. Cada vez que se haga clic en el botón, agregaremos un nuevo objeto ripple a la matriz, que almacenará su posición y activará la animación Después de un breve retraso, eliminaremos esa ondulación de la matriz para mantener las cosas limpias. De esta manera, múltiples ondas pueden aparecer y desaparecer sin problemas al hacer clic en el botón Agreguemos un nuevo estado para almacenar las ondas, llamémoslo ondulaciones, así Dentro del mango, haga clic en la función llamada set ripples. Toma las ondulaciones anteriores, y en un coback devuelven una nueva matriz con las viejas ondulaciones y una Por ahora va a ser una nueva onda. Aquí abajo, usaremos la matriz ripple para determinar cuántas ondulaciones necesitamos renderizar en función de la longitud de la matriz En ondulaciones mapa de puntos con el cobac que toma su ondulación y el argumento clave, que se crea por defecto con react Ahora toma el elemento ripple span, córtalo y colócalo dentro del cobac entre dos paréntesis así Agrega un atributo key y establecelo igual al argumento key. Guarde el código y probemos el resultado. La animación sigue funcionando, y aquí está el momento de la verdad. Cuando hago clic muy rápido, las ondas se crean una tras otra de una manera suave Pero todavía tenemos el problema. Inspeccionemos el código fuente de la página. Y dentro de nuestro elemento botón, podemos ver un desastre. El elemento ripple span se renderiza muchas veces dentro de la cúpula. Esto definitivamente afectará el rendimiento. Queremos quitar su ondulación después de un pequeño período de tiempo y mantener limpia nuestra cúpula. Dentro de la función de clic de control, agregue un tiempo de espera establecido con una devolución de llamada Establezca la duración del tiempo de espera en 600 milisegundos, que es la duración de la animación definida dentro la clase po CSS para la animación po definida aquí mismo Después de 600 milisegundos, el conjunto de llamadas ondulaciones. Toma la matriz anterior y devuelve filtro de punto anterior con una devolución de llamada que toma su ondulación y filtra o elimina ondas que no tienen una clave igual a u tecla de punto de ondulación Entonces solo queremos mantener Nueva ondulación y quitar el resto. La nueva onda aún no existe, así que vamos a definirla aquí mismo. Va a ser una constante y un objeto. Este objeto representará su ondulación, y su ondulación va a tener estas propiedades de estilo. Entonces vamos a definir algo cercano a eso dentro de este objeto. Agregue una propiedad X con valor cero, una propiedad Y con valor cero y un tamaño de valor 100%. Las propiedades X e Y van a mantener la posición del cursor cuando hacemos clic en la parte inferior, y la propiedad size es hacer que el repeler cubra todo el botón Vamos a manejar esto en un rato, pero por ahora, mantén estos valores. Y finalmente, vamos a tener una propiedad clave porque la estamos usando aquí y siempre es mejor crear nuestras propias claves en lugar de confiar en reaccionar para hacer eso. Así que establece su valor a punto de fecha ahora. Reemplaza esta nueva cadena de repeler con una nueva constante Javascript de repeler Para el atributo key, usemos la clave de punto ripple. Digamos esto y la animación sigue funcionando. Y lo más importante, si inspeccionamos esto dentro del elemento button, bueno, necesitamos recargar la aplicación para que empecemos de nuevo Ahora mismo, si hago clic en el botón, notarás que aparece el elemento ripple span, y luego después de 600 milisegundos, desaparece Ahora todavía nos falta algo. Queremos controlar la posición y el tamaño de la ondulación mediante programación Así que necesitamos usar las propiedades del objeto ripple para diseñar el span ripple. Reemplacemos esto con el punto de ondulación X. Arriba, ponlo en punto de ondulación Y, y para el ancho y la altura, use el tamaño del punto de ondulación. Estas propiedades aún no tienen ningún efecto en las ondas todavía. Definiremos sus valores en base a las referencias de los botones. Por aquí, defina una constante ref de botón. Usaremos el use Rf react hook y estableceremos su valor inicial en un nulo. Asegúrese de impartir el uso del gancho Rf de reaccionar. Usando este gancho, podremos definir la posición del cursor sobre el botón y determinar el tamaño de la ondulación. Bien, ahora agrega el atributo ref al elemento button y establece su valor en button ref. De esta manera, el botón ref constante mantendrá la referencia del botón en la muñeca. En la función de clic de control, defina una constante. Rect es la abreviatura de rectángulo porque va a representar la forma rectangular del botón y su posición en la pantalla Establece el valor al botón Rf, punto actual punto consigue delimitar cliente Rt, que es una función a la que hay que llamar Vamos a registrar en consola la variable rat y ver qué nos da. Cuando hago clic, obtengo esta salida en la consola. Así que consigue delimitar la pista del cliente, nos da esta información sobre el botón, que utilizaremos para calcular la posición y el tamaño de los botones Quitar el registro de la consola agregar una constante de tamaño, calcular el tamaño usando la función math dot max, que nos da el máximo de dos números dados, pasando g punto ancho y g punto alto. Esto establece el tamaño po la dimensión mayor del ancho o alto del botón para que el efecto cubra completamente el botón al animar Ahora vamos a calcular la coordenada X del cursor cuando hacemos clic en el botón. Entonces necesitamos acceder al evento click. React pasaremos el evento click por defecto a la función como argumento. Lo llamaremos E abreviatura de evento. Del evento click, tomamos los clics x coordenada E punto cliente X, restamos los botones posición izquierda, punto derecho izquierdo, y lo ajustamos a la mitad del tamaño po Entonces tamaño dividido por dos al centro. Esto calcula la posición de las ondas X dentro del botón. A continuación, defina Y constante. Tomamos los clics Y coordenada E cliente Y, restamos los botones posición superior, punto arriba, y ajustamos a la mitad del tamaño de ondulación, así lo centramos Entonces tamaño dividido por dos. Esto calcula la posición de las ondas Y dentro del botón. Ahora usaremos estos cálculos dentro del nuevo objeto ripple para dar forma a nuestra ondulación. Entonces para esta talla, nos referiremos al tamaño calculado. Para la propiedad Y, nos referiremos a la coordenada Y del cursor y la misma para la coordenada X. Y esa es la pieza final para crear este hechizo mágico. Guardemos esto y veamos los resultados. Cierra esta ventana, y cuando hago clic, las ondas comienzan a animarse desde la precisión del cursor Y, y el tamaño de la ondulación cubre todo el Pasamos de la implementación básica a la implementación avanzada de este efecto de animación de botones, y has aprendido una nueva habilidad y una nueva perspectiva de cómo deben construirse y reaccionar las cosas. Terminar este curso es realmente un gran logro. Demuestra que tienes la chispa que te motiva a dedicar tiempo y esfuerzo a aprender cosas nuevas Y eso, amigo mío, es más importante en cualquier historia exitosa. Te dejaré aquí, pero siéntete libre de seguirme y enviar tu proyecto en la cartera del proyecto en Skill Share, que puedas obtener comentarios y tal vez tratar de idear tu propia lógica o animación y compartirlo con otros alumnos y conmigo. Estaré feliz de ver tus creaciones.