Ich habe hauptsächlich Erfahrung mit pixelbasierten Grafiken und Webdesign. Allerdings bin ich noch nie auf SVGs gestoßen. Eine Google-Suche nach diesem Problem hat mich davon überzeugt, dass die Antwort darin bestehen könnte, SVG zum ersten Mal zu verwenden!
Was ich versuche, ist, eine Animation aus der Zeichnung von Text zu erstellen. Bisher habe ich das gefunden und es sieht ziemlich gut aus, aber der animierte Pfad ist nur eine Linie, kein Text.
Ist es überhaupt möglich, SVG-Pfade für Text zu erstellen?
Kann SVG-Text animiert werden?
Gibt es dazu noch andere Ideen oder Ansätze?
Der Grund, warum es keine gute Bibliothek zum Animieren von Textzeichen selbst gibt, liegt darin, dass alle Schriftarten unterschiedlich sind . Einen allgemeinen, programmatischen Ansatz zum Kompensieren aller Schriftarten zu entwickeln, nähert sich dem Bereich des Unmöglichen.
Damit so etwas existiert, müsste die Bibliothek jedes einzelne Zeichen der gegebenen Schriftart analysieren, berechnen, wann die Strichbreite geändert werden muss, die Strichrichtung berechnen (wahrscheinlich jedes Zeichen in mehrere kleinere Linien aufteilen, um natürliches Schreiben zu simulieren), Erstellen Sie dann die Figur in SVG oder Canvas neu, damit sie Stück für Stück animiert werden kann. Es gibt wahrscheinlich einige andere Dinge, die ich verpasse, aber der Punkt ist, dass es definitiv nicht einfach ist, generisch zu machen.
Daher bleiben uns zwei Möglichkeiten, das zu tun, was Sie wollen, und beide sind nicht dynamisch bearbeitbar. Die erste besteht darin, ein Video (oder GIF) des zu schreibenden Textes zu verwenden, was für nicht handgeschriebene Schriftarten ziemlich schwierig zu erstellen ist.
Die zweite besteht darin, den Zeilenansatz zu verwenden, den Sie in der Frage verlinkt haben, indem Sie den Text in einen Pfad umwandeln (was in einem Editor wie InkScape oder Illustrator möglich ist). Sobald dies erledigt ist, kann genau der gleiche Ansatz wie in dem von Ihnen verlinkten Tutorial verwendet werden. Sie können die SVG-Linien auch auf verschiedene Arten animieren, indem Sie ein Plugin wie dieses verwenden .
Wenn Sie eine Animation des eingegebenen Textes wünschen, können Sie diesen Ansatz verwenden . Es gibt wahrscheinlich eine Bibliothek, die es natürlicher macht, aber ich habe noch nicht intensiv nach einer gesucht.
Sie können dieses Plugin anzeigen:
http://www.pixel-conception.com/font_anim/
Es tut genau das, was Sie wollen.
Sie können Ihre Schriftart auswählen, Farbe, Hintergrund, Farbverlauf usw. definieren.
moklek
kianenigma