Teknik animasi SVG kecil yang populer adalah menggambar jalur. Jika Anda tidak dapat membayangkannya, inilah kumpulan dari miliaran contoh yang saya buat. Pada dasarnya goresan di sekitar bentuk SVG menggambar dirinya sendiri seiring waktu.
Saya pertama kali mendengarnya dari artikel Jake Archibald Gambar garis animasi dalam SVG, yang merupakan penjelasan yang baik tentangnya. Tapi tentu saja, saya mencoba penjelasan saya sendiri dan kami membahasnya di video ini.
Saya pikir paling mudah untuk berpikir tentang memulai dengan CSS, dan bagaimana properti tanda hubung bekerja seperti yang diterapkan pada bentuk SVG. Bagaimana mereka bisa menjadi lebih panjang, dan bahkan cukup lama sampai menutupi (atau tidak menutupi) seluruh bentuk. Kemudian mengimbangi mereka ketika mereka selama itu adalah bagaimana gambar itu bekerja.
Kemudian setelah Anda memahaminya, pahami bahwa JavaScript dapat membantu menghitung panjang tanda pisah dan offset yang diperlukan dan melakukannya dengan benar.