Maak een geanimeerde SVG-lader met behulp van de DrawSVG van GreenSock

Wat je gaat creëren

De tutorial van vandaag laat je onder de indruk dat je zo weinig code hebt geschreven om zo'n heerlijke animatie te maken. DrawSVG door de ongelooflijk slimme groep bij GreenSock stelt u in staat om geleidelijk de slag van een SVG te onthullen (of te verbergen). Laten we eens kijken hoe dat werkt door een geanimeerde preloader te bouwen.

Wat doet DrawSVG?

Zoals vermeld, biedt de DrawSVG-plug-in u de mogelijkheid om de slag van een SVG te onthullen (of te verbergen), maar deze kan ook worden geanimeerd buitenwaarts vanuit het midden van een streek (of een positie / segment). Dit is precies wat we zullen doen in de komende oefening.

DrawSVG maakt deel uit van het GreenSock Animation Platform (GSAP) en kan worden gebruikt in elke TweenLite-, TweenMax-, TimelineLite- of TimelineMax-animatie. Alle populaire functies binnen GSAP (runtime-besturingselementen, callbacks, eases, overschrijfbeheer, nesten) werken ook met uw mooie SVG-animaties! *vuist hobbel *

Pak een kopie van DrawSVG

Toegang tot de DrawSVGPlugin plus documentatie en ondersteuning vereist een Club GreenSock-lidmaatschap. Op het moment van schrijven variëren de plannen van $ 50 tot $ 150 per jaar, afhankelijk van het lidmaatschapstype.

Probeer DrawSVGPlugin gratis op Codepen!

Er is een speciale, volledig functionele versie van de DrawSVGPlugin gekoppeld vanuit de DrawSVGPlugin Codepens van GreenSock, dus voel je vrij om ze te vorken, voeg je eigen SVG-afbeeldingen toe en neem DrawSVGPlugin voor een draai. 

Notitie: de speciale versie van de plug-in werkt alleen op het CodePen-domein.

Onze lader bouwen

De onderstaande code vertegenwoordigt alles wat we nodig hebben om deze SVG-lader te laten werken! 

Je vindt de demo terug in elke browser die SVG ondersteunt (behoorlijk stevige ondersteuning als je IE8 en eerder negeert). U kunt ook de volledige Filler Loader-demo bekijken op CodePen.

De markup

Dit zijn de markeringen die we nodig hebben:

Binnen onze index.html leeft een single  tag die een bevat  label. Verbonden met zijn twee attributen die helpen bij de positionering binnen het selectiekader (het zwarte vierkant). Deze twee attributen zijn cx en cy en plaats de cirkel binnen de Viewbox van de  element. 

U kunt zien hoe dit systeem werkt in de afbeelding die volgt. Het eerste frame van de serie vertegenwoordigt ons  zonder enige attributen voegt het tweede frame toe cx = "50" en tenslotte voegt het laatste frame toe cy = "50" . De x en y van deze kenmerken verwijzen naar het cartesiaanse coördinatensysteem dat onze vorm positioneert op het bijbehorende horizontale en verticale vlak.

Het laatste attribuut (r) van cirkel bepaalt de straal van onze cirkel of, met andere woorden, de lengte van het midden van de cirkel tot de rand van de doos. Voel je vrij om die waarde aan te passen in mijn CodePen-demo om de resultaten te zien als de waarde wordt gewijzigd.

De stijlen

Nu voor sommige stijlen.

.vulmachine-loader hoogte: 32px; breedte: 32px; transformeren: roteren (-90deg);  .fill-path fill: none; beroerte: wit; stroke-linecap: butt; streekbreedte: 8px; 

Dit specifieke voorbeeld heeft een minimale styling. We definiëren een aantal beperkingen zoals breedte en hoogte (32 x 32), dan is de .fill-path class is wat ons pad zijn uiterlijk geeft door een paar SVG-eigenschappen beschikbaar te stellen voor ons in CSS-land. We geven het pad een eindtype van breedte, kleur en lijn. Het eindtype voor deze demo is ingesteld op mikpunt en vierkanten volledig de eindpunten van het pad. 

Nu kunnen we de cirkel draaien -90deg (tegen de klok in). U kunt zien waarom op basis van de onderstaande schermafbeeldingen hieronder. Het linker beeld toont de cirkel vóór onze rotatie en de tweede afbeelding toont de cirkel na onze rotatie.

JavaScript

Nu om dingen te laten werken.

var loader = new TimelineMax (repeat: -1), fill_path = $ ('. fill-path'), fill_duration = 1.2, fill_position = '+ =. 25'; // plaats tween 0,25 seconden na einde van init tween loader.fromTo (fill_path, fill_duration, drawSVG: '0', drawSVG: '100%', fill_position) .to (fill_path, fill_duration, drawSVG: '100 % 100% ', fill_position);

Als u de TimelineMax-oproep nog nooit hebt gezien, hoeft u niet bang te zijn. U kunt hier meer over lezen voordat u verder gaat. 

Denk aan TimelineMax als een tijdlijn waar we onze frames aan zullen toevoegen. In ons geval hebben we één enkele tijdlijn die een object met een bevat sleutel waarde om het afspelen van de animatie te regelen. Het afspelen is ingesteld om te herhalen, vertegenwoordigd door de waarde -1 toegewezen aan de herhaling sleutel van ons object TimelineMax-opties. Omdat we jQuery gebruiken voor DOM-ophalen, vangen we het pad op met behulp van de .fill-path klasse als onze haak. Dit is de referentie die we gebruiken voor het pad terwijl we het beginnen te animeren.

De laatste overgebleven regels van onze JavaScript is waar de magie echt gebeurt. Het object dat bevat drawSVG begint door onze padanimatie met de klok mee van leeg te starten (drawSVG: '0') gevuld (drawSVG: '100%'). Nu we het pad in één richting hebben ingevuld, moeten we de vulling omkeren (tegen de klok in). Dit is waar onze naar() methode komt binnen en waar we hebben ingesteld drawSVG naar '100% 100%'. Aangezien we onze fill-animatie voor 100% hebben beëindigd, moeten we de vulling nog eens 100% omkeren. Hiermee wordt de vulling geanimeerd van waar de streek zich momenteel bevindt naar een staat waar de streek langs het pad bestaat. Altviool!

Conclusie

Zoals we hebben gezien is DrawSVG extreem licht van gewicht en snel in te stellen waardoor het maken van padanimaties voor SVG erg leuk is om te maken, zelfs voor de beginnende ontwikkelaar. Met heel weinig config kunnen we een ander arsenaal naar ons volgende project brengen, interacties maken en heerlijk ervaren. 

Als u vragen hebt, kunt u het gerust stellen in de opmerkingen hieronder. Blij geanimeerd!