Share
El tutorial anterior de la serie le mostró cómo animar diferentes propiedades CSS de cualquier elemento usando KUTE.js. Sin embargo, el motor central no le permite animar propiedades que son específicas de los elementos SVG. Del mismo modo, no puede animar el SVG morphing de diferentes formas de ruta o el dibujo de diferentes elementos SVG utilizando trazos. Tendrá que usar el complemento SVG de KUTE.js para lograr cualquiera de estas tareas.
Antes de comenzar, tenga en cuenta que tendrá que incluir el motor central KUTE.js y el complemento SVG para que los ejemplos de este tutorial funcionen..
Transformar una forma de SVG en otra es una característica muy común con la que te encontrarás. El complemento SVG de KUTE.js nos brinda todo lo que necesitamos para crear nuestras propias animaciones morphing con facilidad..
Hay tres formas de transformar formas SVG usando esta biblioteca:
Accentsconagua
fromTo () Método para especificar la ruta SVG inicial y final para su elemento. a() Método y evitar especificar la ruta inicial. En este caso, el valor de inicio para la transformación se determinará en función del valor de re atributo del elemento seleccionado que desea transformar. KUTE.fromTo ('# shape-a', ruta: '# shape-a', ruta: '# shape-b'); KUTE.to ('# shape-a', ruta: '# shape-b'); KUTE.fromTo ('# shape-a', ruta: '# shape-a', ruta: 'La ruta de # shape-b como una cadena válida.'); KUTE.to ('# shape-a', ruta: 'La ruta de # shape-b como una cadena válida.');Durante la inicialización, la biblioteca muestra algunos puntos en función de las rutas que proporcionamos. Estos puntos se almacenan en dos matrices diferentes. Finalmente, estas matrices se utilizan para la interpolación. Hay una serie de opciones que puede configurar para controlar el comportamiento de transformación para diferentes rutas.
MorphPrecision: Como habrás adivinado, esta opción te permite especificar la precisión o la precisión de la transformación. Se especifica como un número, y un valor más bajo significa mayor precisión. Tenga en cuenta que una mayor precisión dará como resultado una mayor precisión, pero también será perjudicial para el rendimiento. Esta opción no se aplica cuando se trata de formas o caminos poligonales en los que el atributo d consta solo de h, l, y v. En tales casos, se utilizan las rutas poligonales originales en lugar de muestrear otras nuevas..reverseFirstPath: Puede establecer el valor de esta opción para cierto con el fin de invertir el trazado de dibujo para su primera forma. Su valor predeterminado es falso.reverseSecondPath: Puede establecer el valor de esta opción para cierto con el fin de invertir la ruta de dibujo para su segunda forma. Su valor por defecto es también falso.índice morfo: A veces, los puntos en un camino deben cubrir una gran distancia durante la transformación. Puedes controlar este comportamiento usando el índice morfo parámetro. Cuando se especifica, este parámetro le permite girar la ruta final de tal manera que todos los puntos recorran la menor distancia posible..Usemos lo que hemos aprendido hasta ahora para transformar un icono de batería en un icono de marcador. Debes tener en cuenta que he usado minúsculas. l con el fin de especificar la ruta en términos relativos. Este es el marcado requerido:
El siguiente JavaScript crea el objeto de interpolación e inicia la animación al hacer clic en el botón:
var morphA = KUTE.to ('# battery-a', ruta: '# bookmark-a', duration: 5000); startButton.addEventListener ("click", function () morphA.start ();, false);Aquí hay una demostración que muestra el código anterior en acción. También he añadido un elemento extra donde se establece la animación morph reverseFirstPath a cierto. Esto le ayudará a comprender el impacto general de las diferentes opciones de configuración en la transformación. La duración de la animación se ha establecido en 5 segundos para que pueda observar de cerca ambas animaciones y detectar las diferencias..
En el ejemplo anterior, la ruta principal no tenía ninguna ruta secundaria. Esto hizo que la transformación fuera muy sencilla. Sin embargo, este podría no ser siempre el caso..
Agreguemos una ruta adicional a nuestro marcador, así como al icono de la batería. Si transformas los íconos ahora, verás que solo se anima la primera subruta. La segunda ruta secundaria simplemente desaparece al comienzo de la animación y reaparece al final. La única forma de animar todos los subpaths en tales casos es cambiando los subpaths a caminos individuales. Aquí hay un ejemplo:
Otro efecto de animación popular relacionado con SVG incluye comenzar desde cero y luego dibujar una forma predefinida usando trazos SVG. Esto se puede utilizar para animar el dibujo de logotipos u otros objetos. En esta sección, aprenderá cómo usar KUTE.js para crear una animación de trazos para el ícono de bicicleta de Font Awesome.
Hay tres formas de animar trazos SVG en KUTE.js. Puede animar de 0% a 100% configurando el de a valores como 0% 0% y 0% 100%. También puede dibujar una parte de la forma SVG estableciendo los valores en algo como 0% 5% y 95% 100%. Por último, puede establecer el valor final en 0% 0% para crear un efecto de borrado en lugar de un efecto de dibujo.
Aquí está el código JavaScript que he usado para animar nuestra bicicleta:
var wholeAnimation = KUTE.fromTo ("#icon", draw: "0% 0%", draw: "0% 100%", duration: 10000); var partialAnimation = KUTE.fromTo ("#icon", draw: "0% 5%", draw: "95% 100%", duration: 10000); var eraseAnimation = KUTE.fromTo ("#icon", draw: "0% 100%", draw: "0% 0%", duration: 5000);Como puede ver en el ejemplo a continuación, no necesita preocuparse por las múltiples rutas secundarias dentro de una ruta. KUTE.js anima todos estos subpaths individualmente sin ningún problema. La duración de la animación se utiliza para determinar el tiempo para la animación de la ruta más larga. La duración del trazo para el resto de las rutas secundarias se determina en función de su longitud.
Ya hemos aprendido cómo animar valores de transformación CSS en el segundo tutorial de la serie. El complemento SVG de KUTE.js también le permite usar el svgTransform atributo para rotar, traducir, escalar o sesgar diferentes elementos SVG en una página web.
los girar El atributo acepta un solo valor que determina el ángulo de rotación. De forma predeterminada, la rotación se produce alrededor del punto central del elemento, pero puede especificar un nuevo centro de rotación utilizando la transformOrigin atributo.
los traducir atributo acepta los valores en el formato traducir: [x, y] o traducir: x. Cuando se proporciona con un solo valor, el valor de y se supone que es cero.
Al sesgar elementos, deberás usar skewX y sesgado. No hay soporte para sesgo [x, y] en SVG. Del mismo modo, el escala atributo también acepta un solo valor. Se usa el mismo valor para escalar los elementos en ambas direcciones x e y.
Aquí hay un fragmento de código que aplica todas estas transformaciones en un rectángulo y un círculo..
var rotation = KUTE.allTo ("rect, circle", svgTransform: rotate: 360, repeat: 1, yoyo: true); var scaling = KUTE.allTo ("rect, circle", svgTransform: scale: 1.5, repeat: 1, yoyo: true); var translation = KUTE.allTo ("rect, circle", svgTransform: translate: [100, -50], repeat: 1, yoyo: true); var skewing = KUTE.allTo ("rect, circle", svgTransform: skewX: 25, repeat: 1, yoyo: true);He puesto el yoyó parámetro a cierto de modo que después de reproducir la animación a la inversa, las propiedades de transformación se establecen en su valor inicial. De esta manera, podemos reproducir las animaciones una y otra vez haciendo clic en los botones.
Si presionas el Girar En el botón de demostración, notará que no parece tener ningún efecto en el círculo. Para observar la rotación del círculo, tendrá que aplicar una transformación de sesgo en él para cambiar su forma y luego hacer clic en rotar inmediatamente.
Comenzamos este tutorial cubriendo los aspectos básicos de las animaciones SVG morphing y stroke. Aprendió cómo transformar correctamente las rutas complejas que tienen subpaths y cómo podemos crear un efecto de trazo de borrado en lugar de uno de dibujo al elegir los valores correctos para el dibujar atributo. Después de eso, discutimos cómo podemos usar el svgTransform atributo para animar diferentes transformaciones.
En varios tutoriales, hemos visto cuán poderoso se ha convertido JavaScript. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en Envato Market.
El objetivo del tutorial fue presentarte todas las funciones del complemento SVG de KUTE.js y ayudarte a comenzar rápidamente. Puede aprender más sobre el complemento SVG leyendo la documentación..
