Wie animiere ich Handschrifttext mit SVG: Dasharray, Dashoffset und Masking?

So animieren Sie Handschrifttext auf einer Webseite mit SVG

Ziel

In diesem Leitfaden befassen wir uns mit der Animation von SVG-Text, um ihn zu ähneln die verführerische Wirkung der Handschrift. Wir werden Techniken erforschen, die von beispielhaften Animationen inspiriert sind, wie sie hier zu finden sind:

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen .io/munkholm/pen/EaZJQE

Implementierung

Um zu erreichen Mit diesem fesselnden Handschrifteffekt weichen wir vom Standardansatz ab, nur den Strich des Textes zu animieren. Stattdessen lassen wir uns von den zuvor erwähnten außergewöhnlichen Animationen inspirieren.

Technik 1:

• Animieren Sie die Eigenschaften „Stroke Dasharray“ und „Stroke Dashoffset“ des Pfads.
• Beschneiden Sie den animierten Strich mit einem Umriss der gewünschten Handzeichnung Form.

JavaScript-Code:

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS:

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

Technik 2:

• Erstellen Sie eine Maske mit der Kontur der handgezeichneten Form.
• Animieren Sie die Position der Maske entlang des Pfads.

JavaScript-Code:

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS:

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

SVG Maske:

<defs>
  <mask></mask></defs>

Zusätzliche Hinweise:

• Passen Sie das Timing und den Pfad der Animation an Ihre spezifischen Bedürfnisse an.
• Experimentieren Sie mit verschiedenen Zeichenstilen, um einen einzigartigen handgezeichneten Effekt zu erzielen.
• Verwenden Sie hochauflösende SVGs, um das zu bewahren komplizierte Details des Textes oder der Form.

Live-Demo:

Sehen Sie sich ein interaktives Beispiel auf CodePen an:

Das obige ist der detaillierte Inhalt vonWie animiere ich Handschrifttext mit SVG: Dasharray, Dashoffset und Masking?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!