Fantasía SVG Carta de Animación

0
45

Una animación SVG carta experimental basado en la Dribbble disparó “Cartas de sombreado en Illustrator” por Jake Bartlett. Desarrollado por anime.js de Julian Garnier.

Hoy nos gustaría mostrar un poco de animación letras de lujo hecho con SVG y anime.js . La idea se inspira en el magnífico de Jake Bartlett animación de apertura para el “sombreado Letras en Illustrator”clase Skillshare por Jamie Bartlett. Aunque no hicimos ningún sombreado, queríamos animar la carrera de cada letra varias veces para conseguir un efecto similar.

Aunque esta animación no es tan hermoso como el disparo Dribbble, queríamos tratar de hacer el trabajo principal concepto. Y el truco para este efecto es tener varias capas de cada letra. Cada solo golpe se anima al tiempo que añade un ligero retraso a cada uno, creando el efecto deseado. Por otra parte, cada letra tiene un pequeño movimiento de saltos.

Atención: Esto es altamente experimental y podría no funcionar según lo previsto en los navegadores antiguos.

Tenga en cuenta que para este efecto letras SVG tiene que estar hecho de un solo trazo, por lo tanto, nuestra construcción tipográfica no se puede hacer de formas o letras normales “contorno” (que puede, por supuesto, pero será un efecto diferente) el tipo. Un gran recurso para glifos solo golpe es “tipo de ruta” por Sivioco y diseño de la vendimia Co . Como alternativa, puede ser creativo y dibuja su propio tipo. Sin embargo, tenga en cuenta que puede haber ajustes necesarios en función de la carrera de poner fin a que está utilizando (por golpes linecap)..

FancySVGLetteringAnimation_WilderMind

La construcción del HTML

Al mirar animación de apertura de Jake, podemos ver que cada letra se ve arrastrado tres veces. Por lo tanto, para nosotros técnicamente, tenemos que tener el mismo camino se triplicó. Con el fin de hacer que las cosas se ven muy bien y no se rompen, también es necesario tener en cuenta que algunas letras deben tener sus diferentes partes animadas por separado. Por ejemplo, la “L” en nuestra Wilder Mind

ejemplo está hecho de dos partes, la vertical y la línea horizontal. Teniendo en cuenta todas estas condiciones, nos encontramos con la siguiente estructura de marcado:

Hemos añadido algunas clases que ayudarán a identificar el SVG, cada letra, las partes de las letras y las capas. Así podemos definir los colores y efectos para cada ejemplo.

FancySVGLetteringAnimation_JustSmoke

Algunos estilo

Sólo necesitamos un par de estilos para el SVG y los caminos. Es importante tener en cuenta que estamos utilizando el valor “a tope” para el accidente cerebrovascular-linecap propiedad para que nuestras líneas de trayectoria empieza allí donde comienza la ruta y no antes (como sería el caso de “cuadrado” o “vuelta”).

Los golpes por cada capa en nuestro primer ejemplo se encuentran un poco más gordos para cada capa nueva de manera que no vemos ningún esquema fea que brilla a través.

La acción

Para las animaciones que estamos utilizando anime.js lo que nos permite configurar fácilmente las propiedades de animación y manejar los diferentes tipos de animaciones que tenemos. En particular, tenemos dos tipos principales de animaciones: el movimiento de cada grupo de letras (entrante y saliente) y la animación del accidente cerebrovascular. La animación de carrera se realiza como de costumbre con el ajuste de accidente cerebrovascular-dasharray y el accidente cerebrovascular-dashoffset a la longitud de la ruta con el fin de ocultarlo, y luego poner el accidente cerebrovascular-dashoffset a 0 con el fin de dibujar el camino.

Otro pequeño truco que hacemos con el fin de tener un aspecto más suave de las capas, es la animación opacidad de las capas inferiores. Esto asegura que una vez que las capas inferiores se ven inmersos, desaparecen, dejando sin bordes dentados atrás.

Esperamos que disfrute de este pequeño experimento y les resulta inspirador!

DEJA UNA RESPUESTA