Популярний маленький прийом анімації SVG - це малювання контурів. Якщо ви не можете уявити це, ось колекція з мільйонів прикладів, які я створив. По суті, обведення навколо форм SVG з часом вимальовується.
Вперше я про це почув із статті Джейка Арчібальда «Анімоване малювання ліній у SVG», де можна пояснити, наскільки це можливо. Але, звичайно, я спробував своє власне пояснення, і ми розглядаємо це у цьому відео.
Я думаю, що найпростіше подумати про те, щоб почати з CSS, і як властивості тире працюють, як застосовано до фігури SVG. Як вони можуть стати довшими, а то й досить довгими, щоб покрити (або не покрити) всю форму. Потім компенсує їх, коли вони такі довгі, так працює малюнок.
Тоді, як тільки ви це зрозумієте, зрозумійте, що JavaScript може допомогти розрахувати довжину необхідних тире та зсувів і зробити це в самий раз.