En este tutorial, crearemos una gama de imágenes de los triángulos SVG, y configurará una transición animada de una imagen a otra en el clic. Se verá algo como el
Caras del poder
sitio web. Estas animaciones realmente pueden agregar interés a un sitio, particularmente un
página de destino
, así como mejorar
experiencia de usuario
. Si tiene un sitio complejo para mantener, necesitará un super
Alojamiento web
Servicio. ¿Construyendo algo menos complicado? A
Creador de sitios web
podría hacer el trabajo.
Para iniciarnos, vamos a comenzar con dos matrices: uno con los valores que estamos animando y uno con los valores de los que estamos animando. Cada vez que se hace clic en un enlace, vamos a encontrar el SVG que coincida con el
href
de ese enlace y obtener el
puntos
Atributo de cada uno de los polígonos en ese SVG específico.
Vamos a extraer todas las coordenadas en el
puntos
Atributo, obtenga el color de relleno del polígono y luego agregue estas propiedades de un objeto. Luego agregaremos todos estos objetos a una de las dos matrices: el
a
formación.
Usaremos TweENMAX para animar los valores de la
desde
matriz a los valores de la
a
formación. Cuando la animación está completa, estableceremos el
a
matriz para convertirse en el nuevo
desde
formación.
En primera carrera, el
desde
La matriz contendrá todos los valores de puntos y todos los colores de llenado de los polígonos actualmente visibles.
& lt; un href = "# nat" & gt; nat & lt; / a & gt;
& lt; a href = "# bwl" & gt; bwl & lt; / a & gt;
& lt; un href = "# kevin" & gt; kevin & lt; / a & gt;
& lt; svg class = "svg-tenedor" & gt;
polígonos para #nat van aquí
& lt; / svg & gt;
& lt; svg id = "nat" clase = "oculto" y gt;
polígonos para #nat van aquí
& lt; / svg & gt;
& lt; svg id = "bwl" clase = "oculto" y gt;
Polígonos para #BWL van aquí
& lt; / svg & gt;
& lt; svg id = "kevin" clase = "oculto" y gt;
polígonos para #kevin van aquí
& lt; / svg & gt;
01. Convertir imágenes a polígonos.
[dieciséis]
Cómo se verá la imagen antes y después de pasar por primitivo
El primer paso es hacer las imágenes. Para esto usé una herramienta llamada
Primitivo
(revisar la
Github repo
). Las imágenes utilizadas en el tutorial son imágenes personales de algunos amigos.
Ejecute sus imágenes elegidas a través de la utilidad primitiva usando la línea de comandos:
-n 250
Especifica 250 polígonos,
-m 1
Especifica una forma de triángulo, y
-i ininy.jpg -o salida.svg
son la entrada y salida. Es importante que todos los SVG tengan el mismo número de polígonos y que tengan la misma forma.
Salida.svg
Será una colección de polígonos.
02. Pega tus SVGs en el HTML
Después de crear los SVG, pegándolos en el cuerpo del HTML. Duplica la primera SVG y da uno de los duplicados la clase.
sostenedor
.
los
sostenedor
va a ser el único que es técnicamente visible; Será el soporte para todos los polígonos que estén animados dentro y fuera de él. Dale a todos los SVG, excepto el titular de la clase.
oculto
y un
identificación
con un nombre único. Esto debería coincidir con el
href
en los enlaces. Los SVG escondidos estarán ocultos con
Pantalla: Ninguno;
. Es importante asegurarse de que la
href
de cada enlace coincide con el
identificación
de sus respectivos SVG.
Luego declare las variables:
Deja que TopolyGonArray = [];
Deje frishpolygonarray = [];
03. Extraer coordenadas de polígonos.
Ahora tenemos que correr a través de cada uno de nuestros polígonos y obtener las coordenadas en el atributo de puntos. Podemos hacer esto usando REGEX:
[dieciséis]
Guardado como un SVG, todos los triángulos se convierten en elementos.
Cada vez que se hace clic en un enlace, vamos a ejecutar una función que lleva el HREF del enlace hecho clic en un argumento y encontrar el SVG coincidente, obtener los valores de los puntos, animarlo y actualizar la matriz.
Esta función llama otras dos funciones.
createpolygonpointsobject
y
AnimatePoligones
.
createpolygonpointsobject
convierte todos los elementos de polígono en objetos en los que podemos animar los valores y
AnimatePoligones
anima los polígonos dentro
sostenedor
.
Esto usa nuestro
getcoordinados
Función para obtener todas las coordenadas en el atributo de puntos y crea un objeto con cada coordenada y el relleno. Devuelve una matriz de objetos. Decidí hacerlos objetos porque ese tipo de datos parece ser más fácil de trabajar cuando estás animando muchos valores a la vez.
05. Animar los polígonos.
[dieciséis]
En la versión final, los polígonos SVG pasarán a través de una animación.
En cada marco de la animación, este bucle anima el atributo de puntos de los polígonos actualmente visibles en
sostenedor
a los nuevos valores establecidos anteriormente. los
ondulado
método en
Tweenmax.to
se llama cada vez que las actualizaciones de la animación, así que aquí se ejecutará en cada cambio en los valores de
obj.one
De
obj.two
De
obj.three
, etcétera. De esta manera, los valores de puntos animan y la forma se multiplican a tener diferentes coordenadas.
A continuación podemos animar el relleno. Para cada polígono en
sostenedor
, coloque el relleno al relleno del
topolygonarray
Eso está en el mismo índice.
Ahora los polígonos animarán sus coordenadas y sus colores rellenos como se esperaba. ¡Y tu estas listo! ¿Quieres guardar tus páginas? Exportarlos como pdfs y caerlos en
almacenamiento en la nube
.
Para mejorar aún más sus habilidades de diseño web, diríjase a nuestra Conferencia, generar y experimentar un calendario envasado de oradores, talleres y oportunidades de redes valiosas. ¡No te lo pierdas!
Obtenga su boleto de generación ahora
.
Leer más:
La guía completa de svg
Animar svg con javascript
30 mejores herramientas de diseño web para acelerar su flujo de trabajo
