Suosittu pieni SVG-animaatiotekniikka on polun piirtäminen. Jos et voi kuvata sitä, tässä on kokoelma zillion esimerkkejä, jotka olen luonut. Pohjimmiltaan viiva SVG-muotojen ympärille vetää itseään ajan myötä.
Kuulin siitä ensin Jake Archibaldin artikkelista Animated line drawing in SVG, joka on hyvä selitys sille niin kuin mahdollista. Mutta tietysti yritin myös omaa selitystäni ja käymme läpi tämän videon.
Mielestäni on helpointa ajatella CSS: n aloittamista ja kuinka viivaominaisuudet toimivat SVG-muotoon sovellettuna. Kuinka ne voivat pidentyä ja jopa riittävän pitkiä, kunnes ne peittävät koko muodon (tai eivät peitä sitä). Sitten piirustus toimii, kun ne kompensoidaan, kun he ovat niin pitkiä.
Kun ymmärrät sen, ymmärrä, että JavaScript voi auttaa laskemaan tarvittavien viivojen ja siirtymien pituuden ja tekemään sen oikein.