Populāra maza SVG animācijas tehnika ir ceļa zīmēšana. Ja jūs to nevarat attēlot, šeit ir manis izveidoto ziljonu piemēru kolekcija. Būtībā insults ap SVG formām laika gaitā piesaista sevi.
Pirmo reizi par to dzirdēju no Džeika Arčibalda raksta Animated line drawing in SVG, kas ir aptuveni labs tā izskaidrojums, kāds vien var būt. Bet, protams, es mēģināju arī pats izskaidrot, un mēs to aplūkojam šajā videoklipā.
Es domāju, ka visvieglāk ir domāt par sākumu ar CSS un par to, kā darbojas domuzīmes īpašības, kas piemērotas SVG formai. Kā viņi var kļūt garāki un pat pietiekami ilgi, līdz tie noklāj (vai neaizsedz) visu formu. Tad zīmējums darbojas, kad tos kompensē, kad viņi ir tik ilgi.
Tad, kad to saprotat, saprotiet, ka JavaScript var palīdzēt aprēķināt nepieciešamo domuzīmju un nobīdes garumu un izdarīt to pareizi.