Me pregunto cómo hacer animación SVG sin dolor de cabeza. La idea de atascarse en bibliotecas de JavaScript realmente puede desanimar a la gente, pero la animación SVG no tiene por qué ser tan desalentadora. CSS puede manejar la selección de rutas individuales dentro de un SVG para crear efectos, y conocer solo los conceptos básicos puede permitirle convertir íconos planos y desgastados en algo más impresionante.
Cuando consideras cómo se puede integrar esto en diferentes diseños, no lleva mucho tiempo darte cuenta de que las posibilidades de la animación SVG son infinitas. A continuación, repasaremos los pasos fundamentales de la optimización y animación de SVG usando CSS. Para obtener más inspiración sobre el movimiento, eche un vistazo a estos interesantes ejemplos de animación CSS y al código que hay detrás de ellos.
Cómo crear animaciones SVG con CSS
01. Crea y guarda tu SVG
En primer lugar, necesitarás crear un SVG para trabajar. Para este tutorial, usaremos un gráfico simple creado en Adobe Illustrator. Cuando utilice Illustrator para exportar un SVG, reduzca el tamaño de la mesa de trabajo para que se ajuste al gráfico y luego haga clic en “Guardar como”. Seleccione SVG en el menú desplegable “guardar como tipo”, luego “Código SVG…” en el cuadro de diálogo Opciones de SVG. Si necesita el software, consulte nuestra guía sobre el mejor software de diseño gráfico o nuestro artículo sobre cómo descargar Illustrator.
02. Optimice su SVG para la web
Eliminar etiquetas innecesarias hará que TU imagen sea más fácil de manejar. Esto se puede hacer manualmente copiando el código en su editor favorito y eliminando etiquetas y metadatos vacíos. Alternativamente, un recurso fantástico llamado SVGOMG puede hacer esto automáticamente. Simplemente pegue el código en el área 'Pegar marcado' en la interfaz SVGOMG, luego copie la imagen nuevamente usando el botón en la parte inferior derecha.
03. Configurar un documento HTML
Una vez que tenga lista y optimizada la imagen SVG que desea animar, abra el editor de código de su elección y configure un documento HTML en blanco. Escribiremos la animación CSS en un archivo llamado principal.css, así que crea esto también. Para mantener todo enfocado en la animación, hemos incorporado la versión solo CSS de Bootstrap 4.1.3.
04. Crea el diseño para tu animación SVG.
Ahora, construyamos la base de nuestro diseño y hagamos un espacio para nuestro SVG. Agregue un encabezado y dos columnas: una a la izquierda para texto y otra a la derecha, que contendrá el SVG que animaremos. Para darle vida a la página, use un segundo SVG estático como fondo en la etiqueta del cuerpo.
05. Coloque el SVG
Estamos usando nuestra animación para hacer más interesante la introducción en la parte superior de la página. Pegue el código SVG optimizado en la segunda columna de la página. Si usa bootstrap, déle la clase al SVG fluido img para asegurarse de que se adapte a los móviles.
Noticias diarias de diseño, reseñas, procedimientos y más, según lo elegido por los editores.
06. Agregar clases al SVG
Agregar clases al SVG permite a CSS seleccionar las formas individuales dentro de la imagen. Esto significa que puedes animar diferentes formas de la imagen en diferentes momentos, creando un efecto más complejo.
07. Estados iniciales
Seleccionar nuestros elementos SVG en CSS es igual que cualquier otro elemento. Usamos nuestras clases para seleccionar esos elementos dentro del SVG. Ambas partes de nuestro SVG comenzarán ocultas cuando se cargue la página, así que usemos CSS para establecer la opacidad de ambos elementos en 0.
Necesitamos declarar el nombre y los fotogramas clave de cada animación para que CSS sepa lo que queremos hacer cuando le pedimos que realice un efecto. He elegido textoDibujar y rectFadeya que describen cada animación. rectFade Será una animación simple de dos pasos. textoDibujar tendrá un paso intermedio adicional.
Agregamos el rectFade animación a la fondo recto elemento y darle una duración de un segundo. Un Facilitarse Se utiliza bezier cúbico para darle una sensación más suave. Añadimos hacia adelante por lo que el elemento mantiene las propiedades del último fotograma clave cuando finaliza la animación.
Con solo dos fotogramas clave, todo lo que necesitamos hacer para nuestro rectángulo es establecer un conjunto de atributos de inicio y fin. Empecemos con un 1% ancho y acabado en 100% para dar una “expansión al efecto correcto”. También podemos establecer opacidad: 1 hasta el último fotograma clave para que la forma se desvanezca al mismo tiempo.
@keyframes rectFade{ de { ancho: 1%; } a { ancho: 100%; opacidad: 1; } }
11. Agrega la animación de texto.
A continuación, crearemos un efecto de dibujo de línea en nuestro texto y luego usaremos un relleno para desvanecerlo. Para configurar la animación del texto, le damos nuestro textoDibujar con una duración de cuatro segundos. El bézier cúbico se ha modificado en este escalón para darle un ritmo de movimiento ligeramente diferente.
ruta.rectText { opacidad:0; animación: textDraw 4s cúbico-bezier(.56,-0.04,.32,.7) hacia adelante; }
12. Retrasar el inicio de la animación del texto.
Nuestro texto debe ejecutarse justo cuando el rectángulo haya terminado de desvanecerse. Debido a que el rectángulo tiene una duración de un segundo, retrase el inicio de la animación del texto en ese momento.
ruta.rectText { opacidad:0; animación: textDraw 4s cúbico-bezier(.56,-0.04,.32,.7) hacia adelante; retardo de animación: 1 s; }
13. Emular dibujo lineal
(Crédito de la imagen: Joseph Ford)
Para obtener nuestro efecto de dibujo lineal usaremos el trazo-dasharray y desplazamiento de trazo y tablero parámetros. Sus valores serán diferentes a los míos dependiendo del SVG que esté utilizando. Para encontrar su valor, utilice sus herramientas de desarrollador preferidas y aumente trazo-dasharray de 0 hasta cubrir toda la forma con un solo trazo.
ruta.rectText { opacidad:0; trazo-dasharray: 735; animación: textDraw 4s cúbico-bezier(.56,-0.04,.32,.7) hacia adelante; retardo de animación: 1 s; }
14. Fotograma clave del dibujo de la primera línea
Ahora que tenemos nuestro trazo muy grande que cubre toda la ruta del texto, vamos a compensarlo en su propia longitud para alejarlo de manera efectiva. Usando desplazamiento de trazo y tablero por el mismo valor que nuestro tablero de instrumentos Deberías hacerlo. Establezcamos esto en nuestro primer fotograma clave. También haremos que el relleno de la forma sea transparente y estableceremos el trazo en blanco si aún no lo es.
Nuestro fotograma clave medio aparece en 40% a través de la animación. traemos el desplazamiento de trazo y tablero de nuevo a cero para que el guión cubra todo el camino. Podemos volver a agregar el relleno transparente en esta etapa para asegurarnos de que el relleno solo aparezca una vez que se complete el dibujo.
40%{ desplazamiento de trazo: 0; relleno:rgb(255, 255, 255, 0.0); }
16. Complete la forma para finalizar la animación SVG.
Para la última parte de la animación, rellenaremos la forma de blanco. Todo lo que necesitamos hacer para el último fotograma clave es aumentar el valor alfa del color de relleno. Esto crea el efecto de aparición gradual del relleno.
