En populær liten SVG-animasjonsteknikk er banetegning. Hvis du ikke kan forestille deg det, er det en samling av zillion eksempler jeg har laget. I hovedsak trekker strek rundt SVG-former seg over tid.
Jeg hørte første gang om det fra Jake Archibalds artikkel Animert linjetegning i SVG, som handler om en god forklaring på det slik det kan være. Men selvfølgelig prøvde jeg også min egen forklaring, og vi går over det i denne videoen.
Jeg tror det er lettest å tenke på å starte med CSS, og hvordan dash-egenskapene fungerer slik de brukes på en SVG-form. Hvordan de kan bli lengre, og til og med lenge nok til å dekke (eller ikke dekke) hele formen. Så motregner de når de er så lange, er hvordan tegningen fungerer.
Så når du forstår det, må du forstå at JavaScript kan bidra til å beregne lengden på de nødvendige bindestrekene og forskyvningene og gjøre det akkurat.
