28: Kako deluje črtanje SVG - CSS-triki

Anonim

Priljubljena mala animacijska tehnika SVG je risanje poti. Če si tega ne morete predstavljati, je tukaj zbirka milijon primerov, ki sem jih ustvaril. V bistvu se poteza okoli oblik SVG sčasoma potegne.

Zanj sem prvič slišal iz članka Jakea Archibalda Animated line risanje v SVG, kar je približno dobra razlaga, kakršna je lahko. Seveda pa sem poskusil tudi svojo razlago in to obravnavamo v tem videu.

Mislim, da je najlažje razmišljati o tem, kako začeti s CSS in kako delujejo lastnosti pomišljaja, kot velja za obliko SVG. Kako se lahko podaljšajo in celo dovolj, da pokrijejo (ali ne pokrijejo) celotne oblike. Nato risanje deluje tako, da jih poravna, ko so tako dolgi.

Potem, ko to razumete, razumejte, da lahko JavaScript pomaga izračunati dolžino potrebnih pomišljajev in odmikov in to pravilno.