Popularną techniką animacji SVG jest rysowanie ścieżek. Jeśli nie możesz tego sobie wyobrazić, oto zbiór milionów przykładów, które stworzyłem. Zasadniczo obrys wokół kształtów SVG rysuje się samoczynnie w czasie.
Po raz pierwszy usłyszałem o tym z artykułu Jake'a Archibalda Animowane rysowanie linii w formacie SVG, który jest dobrym wyjaśnieniem tego, jak to tylko możliwe. Ale oczywiście spróbowałem również własnego wyjaśnienia i omówimy to w tym filmie.
Myślę, że najłatwiej jest pomyśleć o rozpoczęciu od CSS i o tym, jak działają właściwości kreski w przypadku zastosowania kształtu SVG. Jak mogą stać się dłuższe, a nawet wystarczająco długie, aby zakryć (lub nie zakrywać) cały kształt. Rysunek działa wtedy, gdy są tak długie, aby je odsuwać.
A kiedy już to zrozumiesz, zrozum, że JavaScript może pomóc obliczyć długość potrzebnych kresek i przesunięć i zrobić to dobrze.