Wie nähert man sich der Animation einer SVG-Datei von links nach rechts? [Netz]

Ich habe ein Bild unten, bei dem Text mit Punkten gemischt ist.

Geben Sie hier die Bildbeschreibung ein

Da die Pfade nicht von links nach rechts geordnet sind, wie würde man sich der Animation von links nach rechts nähern?

Die einzige Möglichkeit, die ich mir vorstellen kann, besteht darin, jeden Punkt in einer vertikalen Reihe zu beschriften und dann mit CSS eine Animation zu timen, um den Text zu pulsieren. Kann ich das irgendwie dynamisch machen?

Was Sie erreichen wollen, ist nicht ganz klar. Bitte versuchen Sie genau zu vermitteln, wie Sie es animieren möchten. Können wir auch das SVG-Markup sehen? Wie hast du das SVG erstellt?

Antworten (2)

Sie könnten einfach Ihr Bild verwenden und einen Positionsübergang mit CSS verwenden.

Aber Sie beziehen sich wahrscheinlich darauf, dass die Punkte im Raum fixiert bleiben und zu leuchten beginnen sollten, wenn die Buchstaben vorbeiziehen.

Das ist wahrscheinlich einfacher in After Effects oder einer anderen Anwendung (einschließlich Photoshop) zu animieren, indem Sie eine gepunktete Mustermaske verwenden und eine Ebene unter das Muster verschieben und es als animiertes GIF exportieren. (Sie können leicht sehen, dass sich das E auf einem Quadrat unter dem Muster befindet.)

Geben Sie hier die Bildbeschreibung ein

Aber mit der gleichen Logik könnten Sie ein transparentes PNG als Maske verwenden und ein div unter dem Bild animieren, wiederum mit CSS.

<style>
img {
  background-image: url(E.png);
  background-position:-1000px;
  background-repeat: no-repeat;
  transition: all linear 1s;}
img:hover {
  background-position: 0px;}
</style>

<img src="Mask.png" />

Öffnen Sie diese und bewegen Sie die Maus über das Raster.

http://otake.com.mx/Foros/MaskTest/Test1.html

Sie müssen die Geschwindigkeit der Animation synchronisieren, damit Sie keine Halbkreise haben. Aber das war nur ein einfacher Test.

In diesem Beispiel habe ich das Gitter grau gelassen, damit Sie es sehen können, aber der Effekt wäre natürlich besser, wenn Sie Weiß verwenden würden.

Sie können dieses Ergebnis auf verschiedene Weise erreichen. Aber der eleganteste Weg, der mir in den Sinn kam, ist die Verwendung von SVG-Maskierung dafür. Sara Soueidan hat dazu einen tollen Artikel geschrieben: https://sarasoueidan.com/blog/css-svg-clipping/

Kurz gesagt können Sie Folgendes tun:

  1. Gruppieren Sie jede Zeile
  2. Duplizieren Sie jede Gruppe und passen Sie ihre Farbe an.
  3. Wenden Sie eine Maske auf jede duplizierte Gruppe an, sodass alle duplizierten Gruppen ausgeblendet werden.
  4. Animieren Sie Ihre Maske im Browser mit CSS oder JS.

Der Vorteil dieser Methode besteht darin, dass Sie nicht nur Farbe anwenden können, sondern auch Bilder oder sogar Filme, die maskiert werden sollen. Hoffe das hilft dir :)

Wie nähert man sich der Animation einer SVG-Datei von links nach rechts? [Netz]
AntwortenHierDatenschutz-Bestimmungen1y, 0v