Share
La animación, cuando se aplica cuidadosamente, puede mejorar las interfaces del sitio web y, en última instancia, la experiencia del usuario de un sitio web. En este tutorial, veremos VelocityJS, un motor de animación de JavaScript para animaciones de rendimiento rápido. VelocityJS se ha convertido en una de mis preferencias cuando se trata de la animación en la web. Las razones son, en mi opinión, las siguientes:
Accentsconagua
RunSequence es un método en VelocityJS que podemos usar para realizar pilas de animación consecutivamente. Es un enfoque más elegante que el encadenamiento de funciones de animación, como en jQuery. Hacer esto solo con CSS no es práctico.En este tutorial, veremos lo esencial para realizar animaciones con VelocityJS. También destacaremos algunas características que podrían mejorar nuestro diseño de interfaz de usuario. Entonces, vamos a empezar!
Con jQuery, asumiendo que nos gustaría deslizar un div a la derecha, escribiríamos algo como:
$ ("div"). animate (left: "500px",, duration: 3000, suavizado: "linear"); Casi exactamente de la misma manera, lo escribiríamos así con VelocityJS:
$ ("div"). velocity (left: "500px",, duration: 3000, suavizado: "linear"); Ambos ejemplos moverán el div por 500px a la derecha durante tres segundos observando el elemento izquierda propiedad. La diferencia visible en la sintaxis es el método que se usa para animar el elemento que usa VelocityJS .velocidad() en lugar de jQuery .animar().
También puede notar la discrepancia de rendimiento. La animación de jQuery a veces se siente algo inestable, mientras que VelocityJS funciona como la mantequilla de principio a fin. Darle una oportunidad:
VelocityJS acepta una serie de propiedades CSS, así como su versión de mano larga para manipular el elemento. Podemos usar estas propiedades juntas en una sola instancia de VelocityJS para realizar una animación sofisticada. Por ejemplo:
$ ("div"). velocity (borderRadius: "25px", ancho: "45px", paddingLeft: "0", paddingRight: "0", backgroundColor: "# 8CC152", color: "#fff", borderColor: "# 8CC152", boxShadowX: "0", boxShadowY: "0", duration: 350, suavizando: "easeInQuad"); En este segundo ejemplo, hemos tratado el div con varias propiedades CSS, incluyendo anchura para hacerlo más pequeño, color de fondo, relleno, sombra de la caja, y radio del borde transformarlo en un círculo.
Observe que las propiedades que comprenden dos o más palabras están formateadas en el caso de Carmel formato, siguiendo la convención de nomenclatura de JavaScript, por lo tanto radio del borde se convierte en fronteraRadio Etcétera. También aceleramos la duración a solo 350 milisegundos y, esta vez, optamos por easeInQuad ya que VelocityJS tiene la facilidad de uso de jQuery UI incorporada.
jQuery proporciona algunos métodos para realizar animaciones comunes, como .deslizar hacia arriba() y .fadeOut (), que hacen desaparecer gradualmente los elementos. Así que no es de extrañar que VelocityJS también lo haga. VelocityJS proporciona algunos accesos directos para pasar a un .VelocityJS () ejemplo.
Escribiríamos lo siguiente para deslizar un elemento hacia arriba para ocultar el contenido:
$ ("div"). velocity ("slideUp", duration: 350); Para desvanecerlo, escribiríamos:
$ ("div"). speed ("fadeOut", duration: 350); VelocityJS también proporciona un acceso directo llamado voluta que puede ser útil para crear enlaces que conducen a una sección particular en la página. El siguiente código asume que queremos el enlace., # go-up, para volver a la parte superior de la página al hacer clic.
var $ up = $ ("# go-up"); $ up.on ("click", function () $ ("body"). speed ("scroll", duration: 2000, suavizado: "easeInBack");); Esto es lo que podría parecer:
Otro atajo útil incluido viene en forma de marcha atrás. Este acceso directo nos permite revertir el elemento a su estado inicial una vez que se completa la animación. Tomando el ejemplo de desplazamiento anterior, podemos aplicar marcha atrás para mejorar los iconos de flecha. Para ello, encadenamos una nueva instancia de VelocityJS con marcha atrás añadido, estableciendo el lazo opción a cierto.
$ (". icon"). velocity (translateY: "10px", loop: true). speed ("reverse"); Esto moverá el ícono hacia abajo 10px Inmediatamente después, vuelva a su posición inicial. Como también hemos establecido el lazo opción a cierto La animación se realizará de forma indefinida..
Más efectos de animación están disponibles en UI Pack. El paquete de UI está disponible como un complemento, separado del núcleo de VelocityJS. Una vez que lo hayas incluido, tendrás acceso a una variedad de efectos más allá de deslizar hacia arriba, desvanecimiento, y voluta Abriendo un potencial aún mayor para construir interfaces animadas.
UI Pack también trae dos nuevas opciones: tambalear y arrastrar. los tambalear nos permite realizar un solo efecto, aplicado a una matriz de elementos secuencialmente en lugar de simultáneamente. los arrastrar opción, cuando se establece en verdadero, da una sensación de arrastrando para el último elemento de la matriz.
Como ejemplo, he creado una barra de navegación con algunos menús, uno de los cuales tiene un submenú. Para hacer que el submenú sea más atractivo, he aplicado dos efectos del Paquete de UI con el tambalear conjunto de opciones.
En algún momento, es posible que tengamos que realizar animaciones en diferentes elementos en secuencia. Para hacerlo, tenemos que anidar cada instancia de VelocityJS en orden, por ejemplo:
$ ("# offcanvas"). velocity (translateX: 0, duration: 300,, function () $ (". widgets"). VelocityJS (translateX: 0, opacity: 0, duration: 300,, function () $ ("# close"). VelocityJS (translateY: 0, rotateZ: 0, duration: 150););); La función anterior realizará primero la animación del $ cuerpo, entonces $ nav Una vez que esté completo, y por último el $ menú. Desafortunadamente, este no es un enfoque elegante, ni ideal. Si tiene una docena de animaciones, el código no sería práctico de administrar.
Sin embargo, además de los efectos de animación, el paquete UI viene con un método llamado RunSequence. Esto está diseñado precisamente para resolver nuestros problemas de secuenciación; para apilar animaciones cuidadosamente y ejecutarlas en su orden correspondiente. Tomando el código anterior, podríamos reescribirlo como un objeto de JavaScript con el elemento seleccionado definido dentro de un mi propiedad, las propiedades CSS listadas en un pag propiedad, mientras que las opciones de animación se establecen en el o propiedad.
var animationSequence = [e: $ ("# offcanvas"), p: translateX: 0, o: duration: 300, e: $ (". widget"), p: translateX: 0, opacidad: 0, o: duración: 300, e: $ ("# cerrar"), p: translateY: 0, rotateZ: 0, o: duration: 150]; $ .Velocity.RunSequence (animationSequence); He extendido el código anterior a un diseño fuera de lienzo que funciona. Entréguelo y echa un vistazo a la pestaña de JavaScript para ver el código fuente completo.fffffff
Considero que VelocityJS es una alternativa preferible a la animación jQuery y CSS, particularmente cuando se trata de construir interfaces interactivas que involucran múltiples animaciones. VelocityJS es fácil de usar, está lleno de animaciones predefinidas y, sobre todo, es rápido. Úsalo responsablemente. Como se suele decir: con grandes características conlleva gran responsabilidad..
