Een populaire kleine SVG-animatietechniek is het tekenen van paden. Als je het je niet kunt voorstellen, hier is een verzameling van ontelbare voorbeelden die ik heb gemaakt. In wezen tekent de streek rond SVG-vormen zichzelf in de loop van de tijd.
Ik hoorde er voor het eerst van uit Jake Archibalds artikel Animated line drawing in SVG, dat gaat over een goede uitleg ervan zoals er kan zijn. Maar ik probeerde natuurlijk ook mijn eigen uitleg te geven en dat bespreken we in deze video.
Ik denk dat het het gemakkelijkst is om na te denken over het starten met CSS en hoe de eigenschappen van het streepje werken zoals toegepast op een SVG-vorm. Hoe ze langer kunnen worden, en zelfs lang genoeg om de hele vorm te bedekken (of niet te bedekken). Ze compenseren als ze zo lang zijn, is hoe de tekening werkt.
Als u dat eenmaal begrijpt, begrijp dan dat JavaScript kan helpen bij het berekenen van de lengte van de benodigde streepjes en offsets en het precies goed doet.