English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
anime.js
anime.js es una biblioteca de animaciones JavaScript flexible y ligera.
Es compatible con CSS, transformaciones individuales, SVG, propiedades de DOM y objetos JS.
Características
En el desarrollo de sitios web o aplicaciones móviles, el uso adecuado de animaciones puede tener un efecto ornamental. El uso correcto de animaciones no solo puede ayudar a los usuarios a entender la función de la interacción, sino que también puede mejorar significativamente la belleza y la experiencia de uso de la aplicación web. Además, en la actualidad, las animaciones se han convertido en un estándar de diseño en el desarrollo web y están cada vez más importantes. Especialmente en lugares donde hay interacción con el usuario, el uso de animaciones puede proporcionar una mejor retroalimentación al usuario y mejorar la experiencia del usuario.
En el desarrollo web, hay muchas tecnologías para implementar animaciones. En este artículo, utilizamos anime.js, una biblioteca de animaciones JavaScript ligera y potente, para escribir efectos de animación. Con ella, es muy fácil crear y gestionar animaciones. Si aún no estás familiarizado con el uso de esta biblioteca, puedes ver un artículo introductorio anterior. Este artículo se centra en usarlo para lograr el siguiente efecto:
Este efecto de animación es muy simple, principalmente compuesto por un círculo y una raya blanca.-El radio puede crear este círculo de manera muy conveniente. Usarlo puede ser más simple y requerir menos código que crear un círculo con SVG, aunque en este efecto, debido a que la raya blanca debe implementarse con SVG, también se utiliza SVG para el círculo. Además, SVG se está volviendo cada vez más popular y es vectorial, por lo que se puede ampliar o reducir a voluntad. A continuación, se muestra el código SVG de este círculo:
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32> <circle class="circle" cx="16" cy="16" r="16" fill="#0c3"/> </svg>
El código anterior es conciso y claro, principalmente dibuja un círculo de radio16px de un círculo verde:
Primero implementar un efecto de animación simple, hacer que el círculo se expanda de manera que sea visible en su totalidad. Para lograr este efecto, necesitamos hacer dos cosas:1Y dar a la circunferencia un nombre de clase;2Y crear una instancia de anime.js timeline, que permite combinar varios efectos de animación juntos. Por supuesto, no es necesario usar timeline para crear efectos de animación, se puede crear directamente usando el constructor. Sin embargo, el beneficio de usar timeline es que permite gestionar mejor las animaciones, como la transición y el retraso entre efectos, lo que permite controlar los efectos de animación con mayor precisión. Aquí, el efecto de escala se realiza directamente escalando el SVG, el código es el siguiente:
var checkTimeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });
checkTimeline
.add({
targets: '.checkmark',
escala: [
{ valor: [0, 1], duración: 600, easing: 'easeOutQuad' }
]
)
Explicaré este código brevemente, primero se define una instancia de anime, y se define que la animación es automática y se ejecuta en bucle alternativo mediante autoplay, direction y loop. A través del parámetro targets se especifica el elemento que se debe animar, es decir, checkmark, desde 0 hasta1Realizar la ampliación, el tiempo de animación es600 milisegundos, también se definió la curva de movimiento de la animación.
En la producción de animaciones, la elección del ciclo de tiempo de ejecución de la animación también es un punto que requiere mucha atención. Por un lado, no queremos que los usuarios esperen demasiado, lo que reduciría la experiencia de interacción en su conjunto, haciendo que los usuarios se sientan lentos durante el proceso de interacción. Por otro lado, tampoco queremos que todas las acciones de interacción ocurran de inmediato durante el proceso de operación, lo que también se vería muy brusco. En este ejemplo, el ciclo de tiempo de animación de ampliación y reducción es un poco largo, por supuesto, en la fase de desarrollo, extenderlo un poco es beneficioso para la depuración. Pero en el entorno de producción real, el UI animación es mejor que sea lo más simple posible. Por lo tanto, en el desarrollo de animaciones, es necesario alcanzar el estado ideal a través de la depuración continua. En realidad, con la ayuda de algunas herramientas de curvas de animación, se puede hacer que la experiencia de la animación sea más cómoda y natural, aquí se puede referir a una guía de curvas de animación de Google.
El uso de curvas en el desarrollo de animaciones es una parte indispensable, que puede hacer que la experiencia de la animación sea más cómoda y natural. En el desarrollo real, es necesario elegir diferentes curvas de animación para diferentes tipos de animaciones, lo que es un punto que debe prestarse atención al hacer animaciones. La elección de curvas también está sujeta a la escena específica de la animación, como la animación entre formas, el movimiento parabólico, etc. En resumen, debe cumplir con las leyes del movimiento físico. En CSS3En el que se utiliza con frecuencia en la curva de movimiento es ease-in, ease-out y ease-in-out estos tres, por ejemplo, como ease-out significa animación de salida suave, la suavidad hace que la animación sea más rápida al principio y más lenta al final. ease-out animación de entrada suave, la animación de entrada suave comienza lenta y termina rápida, lo contrario de la animación de salida suave. Generalmente, en las animaciones de la interfaz de usuario, es adecuado usar una animación de salida suave, es decir, ease-out. Por lo tanto, en este ejemplo de animación de casilla, es adecuado usar una animación de salida suave.
A continuación, está la animación de la marca. Formas como la marca generalmente se implementan con rutas (path) en SVG. Para obtener una descripción detallada de las rutas, puedes irEste artículo es digno de ver. En el desarrollo real, generalmente se utilizan herramientas de diseño vectoriales como AI o Inkscape para diseñar y luego exportar en formato SVG. En este caso específico, la implementación de la marca es muy simple, se puede lograr con tres puntos de anclaje la forma de una marca. Finalmente, se establece el valor de la propiedad linecap2.5px para lograr el efecto de esquinas redondeadas en los extremos de la marca.
Es importante notar aquí que durante todo el proceso de diseño, se deben seguir ciertos principios de diseño. Por ejemplo, en este efecto, la consistencia es un principio de diseño importante. Si se utiliza un borde redondeado en gráficos estáticos, es mejor mantener este borde redondeado en la animación. Por supuesto, también se puede usar bordes cuadrados. En resumen, mantén la consistencia de la UI durante todo el proceso.
El código exportado es el siguiente:
<path class="check" d="M9 16l5 5 9-9" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round">
Integrado con el círculo, el efecto es el siguiente:
Ahora parece bastante bien, solo falta el último paso, que es hacer un efecto de animación de dibujo para esta marca. Se ha hablado mucho sobre cómo lograr efectos de animación de borde con SVG. En anime.js, es muy simple implementar una animación de dibujo, ya que proporciona el método anime.setDashoffset para calcular la longitud de la ruta (path), con el que se puede lograr un efecto de animación de dibujo. El código es el siguiente:
checkTimeline
.add({ ... }) /* Pasos previos */
.add({
targets: '.check',
strokeDashoffset: {
value: [anime.setDashoffset, 0],
duration: 700,
delay: 200,
easing: 'easeOutQuart'
}
Siguiendo el mismo esquema, primero seleccionamos el elemento que deseamos animar. Luego, se configura el valor de dashoffset del path, que es el valor inicial de la longitud completa del path, que está completamente invisible fuera del lienzo; mediante el método anime.setDashoffset, se establece su valor en 0, apareciendo en el lienzo, lo que permite lograr el efecto de animación de dibujo.
Finalmente, se mueve la posición de la raya mediante la configuración de transform de la raya, ubicándola en el centro del círculo.
¡OK, un checkbox con efectos de animación está completo! Pueden ver que usar anime.js para desarrollar efectos de animación es bastante simple.
Resumen
Lo mencionado anteriormente es lo que el editor les ha presentado sobre la implementación de checkboxes con efectos de animación en anime.js (recomendado), esperamos que les haya sido útil.
Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial humano y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.