He tenido algo de experiencia principalmente en gráficos basados en píxeles y diseño web. Sin embargo, nunca me he encontrado con SVG. ¡Una búsqueda en Google de este problema me convenció de que la respuesta podría ser usar SVG por primera vez!
Lo que intento hacer es crear una animación a partir del dibujo del texto. Hasta ahora, encontré esto y se ve bastante bien, pero la ruta animada es solo una línea, no texto.
¿Es incluso posible crear rutas svg para texto?
¿Se puede animar el texto svg?
¿Hay otras ideas o enfoques para esto?
La razón por la que no existe una buena biblioteca para animar caracteres de texto es porque todas las fuentes son diferentes . Hacer un enfoque programático general para compensar todas las fuentes se acerca al reino de lo imposible.
Para que exista algo como esto, la biblioteca tendría que analizar todos y cada uno de los caracteres de la fuente dada, calcular cuándo cambiar el ancho del trazo, calcular la dirección del trazo (probablemente dividir cada carácter en varias líneas más pequeñas para simular la escritura natural), luego recrea el personaje en SVG o Canvas para que pueda ser animado pieza por pieza. Probablemente hay varias otras cosas que me estoy perdiendo, pero el punto es que definitivamente no es fácil hacer genérico.
Por lo tanto, nos quedan dos formas de hacer lo que quieras, ninguna de las cuales es editable dinámicamente. La primera es usar un video (o gif) del texto que se está escribiendo, lo cual es bastante difícil de crear para fuentes no escritas a mano.
El segundo es usar el enfoque de línea al que se vinculó en la pregunta, convirtiendo el texto en una ruta (que se puede hacer en un editor como InkScape o Illustrator). Una vez hecho esto, se puede usar exactamente el mismo enfoque que en el tutorial que vinculó. También puede animar las líneas SVG de diferentes maneras utilizando un complemento como este .
Si desea tener una animación del texto que se está escribiendo, puede utilizar este enfoque . Es probable que haya alguna biblioteca para hacerlo de forma más natural, pero aún no he buscado mucho.
Puedes ver este complemento:
http://www.pixel-conception.com/font_anim/
Hace exactamente lo que quieres.
Puede elegir su fuente, definir color, fondo, degradado, etc.
Moklek
kianenigma