Popüler bir küçük SVG animasyon tekniği yol çizimidir. Resmedemiyorsanız, işte oluşturduğum milyonlarca örnek koleksiyonu. Esasen, SVG şekillerinin etrafındaki kontur zamanla kendini çeker.
Bunu ilk olarak Jake Archibald'ın SVG'de animasyonlu çizgi çizme makalesinden duydum; bu, olabileceği gibi iyi bir açıklama hakkında. Ama tabii ki kendi açıklamamı da denedim ve bu videoda bunun üzerinden geçiyoruz.
Bence CSS ile başlamayı ve çizgi özelliklerinin bir SVG şekline uygulandığı gibi nasıl çalıştığını düşünmenin en kolay yolu. Nasıl daha uzun ve hatta tüm şekli örtme (veya örtmeme) noktasına kadar yeterince uzun olabildikleri. O kadar uzun olduklarında onları dengelemek çizimin çalışma şeklidir.
Sonra bunu anladıktan sonra, JavaScript'in gerekli tirelerin ve ofsetlerin uzunluğunu hesaplamaya ve bunu doğru şekilde yapmaya yardımcı olabileceğini anlayın.