Share
Deze tutorial begeleidt u bij het ontwikkelen van een eenvoudige SVG-laadspinner voor gebruik op mobiele websites. Visuele indicatoren zoals de spinner die in deze zelfstudie is gebouwd, worden gebruikt om activiteit met achtergronddraden aan te geven en vormen een cruciaal onderdeel van een sterk ontwerp voor gebruikerservaringen!
Deze tutorial gaat ervan uit dat je al basiskennis hebt in Scalable Vector Graphics (SVG), HTML, CSS, JavaScript en jQuery. De inhoud wordt echter stapsgewijs gepresenteerd, die gemakkelijk genoeg moet zijn om te volgen.
Hoe zit het met Raphaël? We zullen het Raphaël-project gebruiken voor het uitvoeren van de SVG-tekening in deze zelfstudie. Citaat uit de officiële Raphaël-projectwebsite:
Raphaël gebruikt de SVG W3C-aanbeveling en VML als basis voor het maken van afbeeldingen. Dit betekent dat elk grafisch object dat u maakt ook een DOM-object is, zodat u JavaScript-gebeurtenishandlers kunt toevoegen of later kunt wijzigen. Het doel van Raphaël is om een adapter te leveren die het tekenen van vectorillustraties compatibel en gemakkelijk maakt.
Om Raphaël in uw project te gebruiken, hoeft u alleen maar deze stappen te volgen:
var paper = Raphael (divID, width, height);
Accentsconagua
// Creëert cirkel op x = 50, y = 40, met straal 10 var cirkel = papier.cirkel (50, 40, 10); // Stelt het vulkenmerk van de cirkel in op rood (# f00) circle.attr ("vullen", "# f00");  Genoeg theorie! Laten we beginnen met coderen!
Laten we beginnen met het eerst bouwen van onze demo-pagina in HTML. Het moet er als volgt uitzien:
Voorbeeld spinner laden Ontketen de kracht van de laadspinner.
Als laatste, maar daarom niet de minste, voegen we een link toe waarop u kunt klikken om de spinner te laten "ontketenen" (dat wil zeggen de draaiende animatie begint).
Ontketen de kracht van de laadspinner.
Nu we onze markeringen klaar hebben, moeten we beginnen met het invullen van de ontbrekende stijl.
In termen van CSS moet de buitenste div (d.w.z.) zwart zijn en het gehele scherm beslaan bovenop alle elementen die niet tot de spinner behoren.
De andere twee divs (d.w.z.) gebruiken een kleine "hack" om de spinner in het midden van het scherm correct te centreren, ongeacht de schermgrootte of waar de scroll is ingesteld. Ik zal het niet uitleggen in deze tutorial omdat de CSS alleen betrekking heeft op een "dummy" demopagina, niet het centrale doel van deze tutorial.
Uiteindelijk ziet het bestand spinner.css er als volgt uit:
#spinnerFullScreen display: geen; breedte: 100%; hoogte: 100%; positie: vast; top: 0px; links: 0px; achtergrondkleur: zwart; dekking: 0; z-index: 9999998; #floater display: tabel; breedte: 100%; hoogte: 100%; #spinner weergeven: tabelcel; vertical-align: middle; text-align: center; z-index: 9999999;
In theorie bestaat onze spinner uit een bepaald aantal sectoren (8 in de afbeelding) met een lengte ("sectorlengte") en een breedte ("sectorbreedte"). Natuurlijk hebben deze sectoren ook een afstand tot het centrum ("centerRadius").
Maar is dit statisch? En hoe zit het met de animatie? Welnu, de animatie is slechts een kleine truc: met alle sector-opaciteitswaarden van 0,0 tot 1,0, veranderen we continu de dekking van elke sector om gelijk te zijn aan de dekking van de volgende sector. Verward? Het wordt waarschijnlijk transparanter als je de implementatie ziet in JavaScript.
Om een herbruikbare bibliotheek te maken, zullen we een op Object georiënteerd paradigma gebruiken geïmplementeerd in JavaScript. De bibliotheek is opgebouwd rond een constructor (functie Spinner (data)) en twee verschillende functies:
In het eerder gemaakte spinner.js-bestand maken we eerst de constructor van de Spinner, zodat de gebruiker van de bibliotheek een aantal waarden kan instellen, zoals het aantal sectoren, de afstand van de sectoren tot het midden, enzovoort.
/ ** * maakt het object Spinner met gegevenswaarden of standaardwaarden in het geval ze ontbreken * @param data * @constructor * / function Spinner (data) // aantal sectoren van de spinner - default = 12 this.sectorsCount = data.sectorsCount || 12; // de afstand van elke sector tot het centrum - standaard = 70 this.centerRadius = data.centerRadius || 70; // de lengte / hoogte van elke sector - default = 120 this.sectorLength = data.sectorLength || 120; // de breedte van elke sector van de spinner - default = 25 this.sectorWidth = data.sectorWidth || 25; // kleur van de spinner - default = wit this.color = data.color || 'wit'; // de dekking van het volledige scherm this.fullScreenOpacity = data.fullScreenOpacity; // array van spinner-sectoren, elke spinner is een svg-pad this.sectors = []; // array met de dekking van elke sector this.opacity = []; // het raphael-spinnerobject this.spinnerObject = null; // id van de time-outfunctie voor de roterende animatie this.spinnerTick = null;
Nu verder met de grootste methode van het spinner-object, de create-methode. Deze methode wordt elke keer opgeroepen als de gebruiker de spinner wil laten zien. Let op het gebruik van jQuery om onze elementen te selecteren. Dit is waar de id's waar we het hierboven over hebben gehad, binnenkomen:
Spinner.prototype.create = function () // toont de volledige schermspinner div $ ('# spinnerFullScreen'). Show (); // animeert de dekking van de volledige scherm div met de spinner van 0 tot 0.8 $ ('# spinnerFullScreen'). animeren (opacity: this.fullScreenOpacity, 1000, function () ); We gaan door met het maken van de methode, we doen een aantal initiële berekeningen, zoals de totale grootte van de spinner, en bereiden het Raphael-object voor om de secties te tekenen:
// middelpunt van het canvas / spinner / raphael-object var spinnerCenter = this.centerRadius + this.sectorLength + this.sectorWidth; // hoekverschil / stap tussen elke sector var beta = 2 * Math.PI / this.sectorsCount; // params voor elke sector / pad (lijnkleur, lijnbreedte, lijnlijn-lijn) var pathParams = "lijn": this.color, "stroke-width": this.sectorWidth, "stroke-linecap": " ronde "; / ** * maakt het Raphael-object met een breedte en een hoogte * gelijk aan het dubbele van het middelpunt van de spinner * "spinner" is de id van de div waar de elementen worden getekend * / var paperSize = 2 * spinnerCenter; this.spinnerObject = Raphael ('spinner', paperSize, paperSize); Het volgende is het tekenen van de cyclus en het bouwen van een array met de huidige dekking van elke sector:
// bouwt de sectoren en de respectieve dekking voor (var i = 0; i < this.sectorsCount; i++) //angle of the current sector var alpha = beta * i; var cos = Math.cos(alpha); var sin = Math.sin(alpha); //opacity of the current sector this.opacity[i] = 1 / this.sectorsCount * i; /** * builds each sector, which in reality is a SVG path * note that Upper case letter means that the command is absolute, * lower case means relative to the current position. * (http://www.w3.org/TR/SVG/paths.html#PathData) * we move the "cursor" to the center of the spinner * and add the centerRadius to center to move to the beginning of each sector * and draws a line with length = sectorLength to the final point * (which takes into account the current drawing angle) */ this.sectors[i] = this.spinnerObject.path([ ["M", spinnerCenter + this.centerRadius * cos, spinnerCenter + this.centerRadius * sin], ["l", this.sectorLength * cos, this.sectorLength * sin] ]).attr(pathParams);
Nu we onze spinner hebben laten bouwen en weergeven, moeten we deze animeren. Dit is het laatste deel van de aanmaakmethode:
/ ** * voert een animatiestap uit en roept zichzelf opnieuw * @param spinnerObject deze parameter moet worden doorgegeven * vanwege scopewijzigingen wanneer aangeroepen via de functie setTimeout * / (functie animationStep (spinnerObject) // verschuift naar rechts de dekking van de sectoren spinnerObject.opacity.unshift (spinnerObject.opacity.pop ()); // werkt de dekking van de sectoren bij voor (var i = 0; i < spinnerObject.sectorsCount; i++) spinnerObject.sectors[i].attr("opacity", spinnerObject.opacity[i]); /** * safari browser helper * There is an inconvenient rendering bug in Safari (WebKit): * sometimes the rendering should be forced. * This method should help with dealing with this bug. * source: http://raphaeljs.com/reference.html#Paper.safari */ spinnerObject.spinnerObject.safari(); /** * calls the animation step again * it's called in each second, the number of sectors the spinner has. * So the spinner gives a round each second, independently the number of sectors it has * note: doesn't work on IE passing parameter with the settimeout function :( */ spinnerObject.spinnerTick = setTimeout(animationStep, 1000 / spinnerObject.sectorsCount, spinnerObject); )(this); ;//end of the create method Eindelijk de vernietigingsmethode van onze spinner:
/ ** * vernietigt de spinner en verbergt het volledige scherm div * / Spinner.prototype.destroy = function () // stopt de animatiefunctie clearTimeout (this.spinnerTick); // verwijdert het Raphael spinner-object this.spinnerObject.remove (); this.spinnerObject = null; // animeert de dekking van de div opnieuw naar 0 en verbergt deze (weergave: geen) aan het einde $ ('# spinnerFullScreen'). animeren (opacity: 0, 2000, function () $ ('# spinnerFullScreen' ).verbergen(); ); ; Met de spincode op zijn plaats, is het nu tijd om een gebeurtenis aan de link te koppelen, zodat wanneer de gebruiker erop klikt, we de spinner gedurende een interval van 6 seconden tonen. Persoonlijk gebruik ik dit voor asynchrone verzoeken aan de server en wanneer het verzoek voorbij is, verwijder ik eenvoudig de spinner.
Merk op dat deze code alleen kan worden gebruikt nadat alle bibliotheken waarvan de spinner afhankelijk is, zijn geladen. U kunt deze code aan het einde van het spinner.js-bestand of in een ander JavaScript-bestand toevoegen als u het spinner.js-bestand onafhankelijk en herbruikbaar wilt houden voor andere projecten.
$ (document) .ready (function () $ ('# createSpinner'). click (unleashSpinner);); function unleashSpinner () var data = ; data.centerRadius = 35; data.sectorLength = 50; data.sectorsCount = 10; data.sectorWidth = 20; data.color = 'wit'; data.fullScreenOpacity = 0.8; var spinner = new Spinner (data); spinner.create (); setTimeout (function () spinner.destroy ();, 6000); return false; We kunnen de variabele van de spinner zo vaak opnieuw gebruiken als we willen.
De spinner die in deze zelfstudie wordt gedemonstreerd, kan worden gebruikt in webpagina's die niet alleen zijn ontworpen voor mobiele apparaten, maar ook voor 'normale' webpagina's. Ik heb dit al geprobeerd met beide methoden, en het werkte prima!
Om uw kennis te testen, kunt u op enkele unieke manieren werken aan het verbeteren van de huidige implementatie van de spinner. U kunt bijvoorbeeld proberen het formaat / de vorm van de secties aan te passen, door beweging met de klok mee of tegen de klok in in te schakelen, of een ontwikkelaar in staat stellen een ID voor de spinner te kiezen om id-clashes te voorkomen.
Dat is het voor deze tijd. Ik hoop dat je deze tutorial leuk vond!
