SVG-Text mit der Geste der Handschrift animieren

In diesem Artikel befassen wir uns mit den Techniken, die zum Erstellen der fesselnden handschriftähnlichen Textanimationen verwendet werden, die in Beispielen gezeigt werden wie CodePen.io/se7ensky/pen/waoMyx und CodePen.io/munkholm/pen/EaZJQE.

Verstehen der Standard-Dash-Animationstechnik

Die Se7ensky-Animation nutzt geschickt die Standard-Dash-Animationstechnik. Diese Technik beinhaltet:

1. Zeichnen eines kontinuierlichen Strichs:Erstellen eines kontinuierlichen Strichs entlang des Textpfads.
   
   
   

    <path></svg>

   
   

   
   
2. Den größten Teil des Strichs ausblenden: Festlegen Die Eigenschaft Stroke-Dasharray wird auf einen Wert gesetzt, der größer als die tatsächliche Länge des Strichs ist, wodurch er zunächst ausgeblendet wird der größte Teil des Strichs.
   
   
   

    Stroke-dasharray: 300;<br>}

   
   

   
   

3. Animieren des Strichs: Verwenden Sie CSS-Animation, um Reduzieren Sie nach und nach die Eigenschaft Stroke-Dashoffset, wodurch der Strich so angezeigt wird, als wäre er vorhanden gezeichnet.
   

   
   

   @keyframes zeichne {<br> bis {</p>
   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">stroke-dashoffset: 0;

   Nach dem Login kopieren

   }
   }

   Pfad {

   Animation: 15 Sekunden zeichnen 1;
   }