У меня был некоторый опыт в основном в пиксельной графике и веб-дизайне. Однако я никогда не сталкивался с SVG. Поиск Google по этой проблеме убедил меня, что ответ может состоять в том, чтобы использовать SVG в первый раз!
Я пытаюсь создать анимацию из рисования текста. До сих пор я нашел это , и это выглядит довольно хорошо, но анимированный путь — это просто линия, а не текст.
Можно ли вообще создать пути svg для текста?
Можно ли анимировать текст svg?
Есть ли другие идеи или подходы к этому?
Причина, по которой не существует хорошей библиотеки для анимации самих текстовых символов, заключается в том, что все шрифты разные . Сделать общий программный подход для компенсации всех шрифтов почти невозможно.
Чтобы что-то подобное существовало, библиотека должна анализировать каждый символ данного шрифта, вычислять, когда менять ширину штриха, вычислять направление штриха (вероятно, разбивая каждый символ на несколько меньших строк для имитации естественного письма), затем воссоздайте персонажа в SVG или Canvas, чтобы его можно было анимировать по частям. Есть, вероятно, несколько других вещей, которые я упускаю, но дело в том, что это определенно непросто сделать общим.
Таким образом, у нас остается два способа сделать то, что вы хотите, и ни один из них не редактируется динамически. Первый — использовать видео (или gif) написанного текста, что довольно сложно создать для нерукописных шрифтов.
Второй — использовать линейный подход, на который вы ссылались в вопросе, превратив текст в путь (что можно сделать в редакторе, таком как InkScape или Illustrator). Как только это будет сделано, можно использовать тот же точный подход, что и в учебнике, на который вы ссылаетесь. Вы также можете по-разному анимировать линии SVG с помощью плагина, подобного этому .
Если вы хотите иметь анимацию набираемого текста, вы можете использовать этот подход . Вероятно, есть какая-то библиотека, чтобы сделать это более естественно, но я еще не искал ее.
вы можете просмотреть этот плагин:
http://www.pixel-conception.com/font_anim/
Он делает именно то, что вы хотите.
Вы можете выбрать свой шрифт, определить цвет, фон, градиент и т. д.
моклек
кианенигма