Share
Animar el trazo de un SVG es perfecto para simular la escritura a mano. En el transcurso de dos tutoriales, vamos a utilizar la animación CSS para hacer que una firma parezca estar escrita, como si estuviera firmando la página usted mismo..
Esto es lo que estaremos construyendo:
Antes de sumergirnos en cualquier código, necesitaremos una versión SVG de su firma. No importa qué software uses para hacer esto, pero trata de mantener las líneas y curvas lo más suaves posible para un mejor efecto..
Aquí está la mía, que puedes ver está dibujada con tres caminos separados:
Primer camino
Segundo camino
Tercer caminoAsegúrese de que su mesa de trabajo esté bien recortada a la firma, luego guarde el archivo como SVG.
Abrir el archivo en un editor de código revelará la estructura XML de SVG. Dependiendo de la aplicación que utilizaste para diseñarlo, además de cómo lo guardaste o exportaste, tendrás un Elemento con algún mumbo jumbo delante de él. El mumbo jumbo puede ser eliminado.
En este caso, los elementos que nos quedan se ven algo así como:
Dentro de nuestro principal tenemos una
Tendremos que apuntar por separado a estos vectores con CSS un poco más adelante, así que asegúrese de que cada uno tenga un nombre de clase adecuado. los Es probable que el elemento ya tenga un ID que refleje el nombre de la capa en la aplicación con la que fue diseñado.
Le he dado a mis vectores los nombres de clase en función de lo que son (el primero es la "I" en mi nombre, por ejemplo).
Para ser justos, su SVG no se verá tan bien. Cada uno de estos vectores tendrá una carga de coordenadas, más varios atributos enterrados dentro de ellos. Las coordenadas deberán permanecer, pero podemos eliminar algunos de los atributos comúnmente utilizados y colocarlos en nuestro CSS, manteniendo las cosas agradables y SECAS.
Voy a construir esto utilizando CodePen, pero puede usar documentos HTML y CSS independientes si lo prefiere. Pegue el código SVG directamente en su documento HTML. Luego, elimine los atributos que cada uno de los elementos de ruta y línea tienen en común, colocándolos en el documento CSS. Por ejemplo, notarás atributos como:
Accentsconagua
fill = "none" stroke = "# 0F436D" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10"Estos pueden ser eliminados y aplicados a través de CSS, así:
camino, línea rellenar: ninguno; accidente cerebrovascular: # 2a3745; ancho de trazo: 2; trazo de línea: redondo; línea de trazo unido: redondo; stroke-miterlimit: 10;
Mucho mas limpio!
Para animar los trazos de este SVG vamos a utilizar una técnica discutida por primera vez por Jake Archibald. La idea es la siguiente: a cada uno de estos vectores se les dará una precipitado carrera. Hacemos esto aplicando un trazo de trazo valor dentro de la CSS:
Para cada uno de estos vectores hacemos el trazo de trazo precisamente la longitud de la ruta, por lo que cada uno tiene un solo guión que cubre toda su longitud. Esto requiere un poco de prueba y error, pero en nuestro caso los valores se ven así:
.stroke-I stroke-dasharray: 80; .stroke-an stroke-dasharray: 360; .stroke-flourish stroke-dasharray: 40;
Ahora, para animar estos trazos, necesitamos compensar cada uno de los guiones para que el brecha cubre el vector, no el guión. ¿Tiene sentido? Estas ilustraciones pueden ayudar. En este primero, imagine que la línea discontinua se está utilizando para cubrir el florecimiento al final de la firma..
Ahora en este, hemos compensado el guión, así que es la brecha la que está sobre el florecimiento:
Ahora todo lo que tenemos que hacer es usar CSS para animar desde el estado de desplazamiento al otro.
La animación CSS se basa en la primera definición de fotogramas clave. Cada fotograma clave representa estados a lo largo de una línea de tiempo, luego nuestros navegadores representan las animaciones entre ellos..
Veamos primero cómo se puede animar este desplazamiento del tablero. Usaremos el primer trazo, la "I", y animaremos entre dos estados. Comience por configurar algunos fotogramas clave:
@keyframes write1 0% stroke-dashoffset: 80; 100% stroke-dashoffset: 0;
Aquí le damos un nombre a los fotogramas clave (escribir1) y utilizando la sintaxis abreviada, especifique que al principio de la línea de tiempo (0%) queremos el golpe-salpicadero ser 80. En otras palabras: el tablero, que es exactamente 80px de largo, se desplazará completamente.
Al final de la línea de tiempo (en 100%) queremos el golpe-salpicadero ser 0, Así que el guión está cubriendo una vez más el vector..
Ahora que tenemos nuestros fotogramas clave, vamos a adjuntarlos a una animación. Añadimos otra declaración a nuestra accidente cerebrovascular-I regla:
.stroke-I stroke-dasharray: 80; Animación: write1 3s infinite linear;
Aquí, usando el animación propiedad, decimos que queremos usar el escribir1 fotogramas clave definidos hace un momento, queremos que todo dure exactamente 3 segundos, queremos que la animación se repita infinitamente y queremos que la velocidad sea lineal (para que no haya aceleración ni desaceleración).
Esto es lo que obtenemos:
Nota: Estoy usando Autoprefixer en CodePen, lo que me ahorra tener que usar prefijos del navegador en la animación.
Necesitamos definir dos conjuntos más de fotogramas clave (escribir2 y escribe 3) para los vectores restantes en la firma, y debemos compensar las longitudes de guión correctas que descubrimos anteriormente:
@keyframes write2 0% stroke-dashoffset: 360; 100% stroke-dashoffset: 0; @keyframes write3 0% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Luego necesitamos aplicar esas animaciones a los dos vectores restantes:
.stroke-an stroke-dasharray: 360; Animación: write2 3s infinite linear; .stroke-flourish stroke-dasharray: 40; Animación: write3 3s infinite linear;
Esto es lo que obtenemos:
¡Ahora estamos llegando a alguna parte! Cada vector se anima perfectamente, en un movimiento lineal que dura 3 segundos..
¿Próximo paso? Para animarlos en secuencia.
Actualmente tenemos tres trazos todos animados simultáneamente. Sin embargo, lo ideal es que queramos que el "yo" anime, luego el "an" y, finalmente, que florezca al final. Si tuviéramos que visualizar eso a lo largo de una línea de tiempo, podría verse así:
Podemos representar estas secciones de la línea de tiempo perfectamente en nuestros fotogramas clave de CSS. Por ejemplo, la primera sección (de 0% a 33.3%) es cuando queremos animar a nuestra "I", por lo que modificamos los fotogramas clave para que terminen en 33.3% en lugar de 100%:
@keyframes write1 0% stroke-dashoffset: 80; 33.3% stroke-dashoffset: 0;
Ahora, dado que nuestras tres animaciones tienen la misma duración (3 segundos), podemos asegurarnos de que la segunda no comience hasta el 33.3%, cuando la primera animación esté completa:
@ keyframes write2 0%, 33.3% stroke-dashoffset: 360; 100% stroke-dashoffset: 0;
Esto es lo que nos da:
Las dos primeras animaciones fluyen muy bien, así que mejoremos las cosas haciendo que la segunda termine con un 66.6%, momento en el que puede comenzar la animación final. Nuestros fotogramas clave se verán así:
@keyframes write1 0% stroke-dashoffset: 80; 33.3% stroke-dashoffset: 0; @keyframes write2 0%, 33.3% stroke-dashoffset: 360; 66.6% stroke-dashoffset: 0; @keyframes write3 0%, 66.6% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Y la secuencia se verá así:
Lo que tenemos es bueno, pero no es perfecto, ciertamente lejos de un movimiento realista de la pluma. Cada uno de estos tres vectores se dibuja en el transcurso de un segundo, independientemente de su longitud. El vector medio es wa-ay más largo que el anterior, por lo que lógicamente debería tomar más tiempo dibujar. Una línea de tiempo mejor podría ser algo como esto:
Para mayor realismo, incluso hay una brecha entre el primer acabado de vector y el segundo comienzo. Así que modifiquemos nuestros valores de fotograma clave para reflejar eso:
@keyframes write1 0% stroke-dashoffset: 80; 20% stroke-dashoffset: 0; @keyframes write2 0%, 25% stroke-dashoffset: 360; 90% stroke-dashoffset: 0; @keyframes write3 0%, 90% stroke-dashoffset: 40; 100% stroke-dashoffset: 0;
Finalmente, aceleremos las cosas cambiando todas las 3s valores a 2s. También podemos actualizar las declaraciones de animación para que cada una se ejecute solo una vez, sin hacer un bucle infinito:
Animación: write1 2s 1 linear;
También es posible que desee jugar con el lineal valor, en lugar de agregar un cierto alivio, como facilidad en, facilidad de entrada, Facilitarse etc. para que el movimiento sea menos uniforme. ¿Qué nos da todo eso??
¡Hemos hecho grandes progresos y hemos aprendido mucho en el camino! En el siguiente tutorial iremos un paso más allá, utilizando Waypoints.js para ayudarnos a controlar cuándo se lleva a cabo la animación. Te veré allá!
