Share
Questo tutorial ti guiderà attraverso lo sviluppo di un semplice filatore di caricamento SVG da utilizzare su siti Web mobili. Gli indicatori visivi come lo spinner costruito in questo tutorial sono utilizzati per indicare attività thread in background e sono una parte cruciale della forte progettazione dell'esperienza utente!
Questo tutorial presume che tu abbia già conoscenze di base in Scalable Vector Graphics (SVG), HTML, CSS, JavaScript e jQuery. Tuttavia, il contenuto è presentato in modo graduale che dovrebbe essere abbastanza facile da seguire.
Che dire di Raphaël? Utilizzeremo il progetto Raphaël per eseguire il disegno SVG in questo tutorial. Per citare dal sito web ufficiale del progetto Raphaël:
Raphaël utilizza SVG W3C Recommendation e VML come base per la creazione di grafici. Ciò significa che ogni oggetto grafico che crei è anche un oggetto DOM, quindi puoi associare gestori di eventi JavaScript o modificarli in seguito. L'obiettivo di Raphaël è quello di fornire un adattatore che renderà il disegno vettoriale compatibile cross-browser e facile.
Per utilizzare Raphaël nel tuo progetto, devi solo seguire questi passaggi:
var paper = Raffaello (divID, larghezza, altezza);
Accentsconagua
// Crea cerchio in x = 50, y = 40, con raggio 10 var circle = paper.circle (50, 40, 10); // Imposta l'attributo fill del cerchio su rosso (# f00) circle.attr ("fill", "# f00");  Basta teoria! Iniziamo la codifica!
Iniziamo creando la nostra pagina demo in HTML. Dovrebbe apparire come il seguente:
Loading Spinner Example Scatena la potenza dello spinner di caricamento.
Ultimo, ma non meno importante, aggiungiamo un link in cui puoi cliccare per "scatenare" lo spinner (cioè iniziare l'animazione rotante).
Scatena la potenza dello spinner di caricamento.
Ora che abbiamo preparato il markup, dobbiamo iniziare a riempire lo stile mancante.
In termini di CSS, il div più esterno (vale a dire) deve essere nero e occupare l'intero schermo sopra tutti gli elementi che non appartengono alla casella di selezione.
Gli altri due div (cioè e) usano un leggero "hack" per centrare correttamente lo spinner nel mezzo dello schermo, indipendentemente dalle dimensioni dello schermo o da dove è impostato lo scroll. Non lo spiegherò su questo tutorial poiché il CSS si riferisce solo a una pagina demo "fittizia", non lo scopo centrale di questo tutorial.
Alla fine, il file spinner.css dovrebbe assomigliare a questo:
#spinnerFullScreen display: none; larghezza: 100%; altezza: 100%; posizione: fissa; inizio: 0px; a sinistra: 0px; colore di sfondo: nero; opacità: 0; z-index: 9999998; #floater display: table; larghezza: 100%; altezza: 100%; #spinner display: table-cell; allineamento verticale: medio; allineamento del testo: centro; z-index: 9999999;
In teoria, il nostro spinner è composto da un certo numero di settori (8 nell'immagine) che hanno una lunghezza ("sectorLength") e una larghezza ("sectorWidth"). Naturalmente, questi settori hanno una distanza dal centro ("centerRadius").
Ma questo è statico? E l'animazione? Bene, l'animazione è solo un piccolo trucco: avendo tutte le opacità del settore che vanno da 0,0 a 1,0, cambiamo continuamente l'opacità di ogni settore per essere uguale all'opacità del settore successivo. Confuso? Probabilmente diventerà più trasparente dopo aver visto l'implementazione in JavaScript.
Per creare una libreria riutilizzabile, utilizzeremo un paradigma Object Oriented implementato in JavaScript. La biblioteca è costruita attorno a un costruttore (funzione Spinner (dati)) e due funzioni distinte:
Nel file spinner.js creato in precedenza, prima creiamo il costruttore dello Spinner, consentendo all'utente della libreria di impostare alcuni valori come il numero di settori, la distanza dei settori al centro e così via..
/ ** * crea l'oggetto Spinner con valori di dati o valori predefiniti nel caso in cui manchino * @param data * @costructor * / function Spinner (dati) // numero di settori dello spinner - default = 12 this.sectorsCount = data.sectorsCount || 12; // la distanza da ciascun settore al centro - default = 70 this.centerRadius = data.centerRadius || 70; // lunghezza / altezza di ogni settore - default = 120 this.sectorLength = data.sectorLength || 120; // la larghezza di ogni settore dello spinner - default = 25 this.sectorWidth = data.sectorWidth || 25; // colore dello spinner - default = bianco this.color = data.color || 'bianca'; // l'opacità di fullScreen this.fullScreenOpacity = data.fullScreenOpacity; // array di settori spinner, ogni spinner è un percorso svg this.sectors = []; // array con l'opacità di ogni settore this.opacity = []; // l'oggetto spinner raphael this.spinnerObject = null; // id della funzione di timeout per l'animazione rotante this.spinnerTick = null;
Ora al metodo più grande dell'oggetto spinner, il metodo create. Questo metodo viene chiamato ogni volta che l'utente vuole mostrare lo spinner. Si noti l'uso di jQuery per selezionare i nostri elementi. È qui che arrivano gli id di cui abbiamo parlato sopra:
Spinner.prototype.create = function () // mostra lo spinner full screen div $ ('# spinnerFullScreen'). Show (); // anima l'opacità del div full screen contenente lo spinner da 0 a 0.8 $ ('# spinnerFullScreen'). animate (opacity: this.fullScreenOpacity, 1000, function () ); Continuando con il metodo di creazione, eseguiamo alcuni calcoli iniziali, come la dimensione totale della casella di selezione, e prepariamo l'oggetto Raphael per disegnare le sezioni:
// punto centrale dell'oggetto canvas / spinner / raphael var spinnerCenter = this.centerRadius + this.sectorLength + this.sectorWidth; // differenza dell'angolo / passaggio tra ogni settore var beta = 2 * Math.PI / this.sectorsCount; // parametri per ogni settore / percorso (tratto-colore, larghezza del tratto, tratto-linecap) var pathParams = "tratto": this.color, "larghezza del tratto": this.sectorWidth, "stroke-linecap": " il giro" ; / ** * crea l'oggetto Raphael con una larghezza e un'altezza * uguale al doppio del centro del filatore * "spinner" è l'id del div in cui verranno disegnati gli elementi * / var paperSize = 2 * spinnerCenter; this.spinnerObject = Raphael ('spinner', paperSize, paperSize); Il prossimo è il disegno del ciclo e la costruzione di un array con l'opacità corrente di ciascun settore:
// crea i settori e la relativa opacità per (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);
Ora che abbiamo il nostro spinner costruito e visualizzato, dobbiamo animarlo. Questa è l'ultima parte del metodo di creazione:
/ ** * esegue un passo dell'animazione e si richiama di nuovo * @param spinnerObject questo parametro deve essere passato * a causa delle modifiche dell'ambito quando viene chiamato attraverso la funzione setTimeout * / (function animationStep (spinnerObject) // sposta a destra l'opacità di i settori spinnerObject.opacity.unshift (spinnerObject.opacity.pop ()); // aggiorna l'opacità dei settori per (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 Infine, il metodo destroy del nostro spinner:
/ ** * distrugge lo spinner e nasconde il div schermo intero * / Spinner.prototype.destroy = function () // interrompe la funzione di animazione clearTimeout (this.spinnerTick); // rimuove l'oggetto spinner Raphael this.spinnerObject.remove (); this.spinnerObject = null; // anima di nuovo l'opacità del div a 0 e lo nasconde (display: none) alla fine $ ('# spinnerFullScreen'). animate (opacity: 0, 2000, function () $ ('# spinnerFullScreen' ) .hide ();); ; Con il codice rotante in atto, è giunto il momento di collegare un evento al collegamento, in modo che quando l'utente fa clic su di esso, mostriamo lo spinner per un intervallo di 6 secondi. Personalmente, lo uso per le richieste asincrone sul server, e quando la richiesta è finita, rimuovo semplicemente lo spinner.
Si noti che questo codice può essere utilizzato solo dopo aver caricato tutte le librerie da cui dipende lo spinner. Puoi aggiungere questo codice alla fine del file spinner.js o in un altro file JavaScript se vuoi mantenere il file spinner.js indipendente e riusabile per altri progetti.
$ (document) .ready (function () $ ('# createSpinner'). click (unleashSpinner);); function unleashSpinner () var data = ; data.centerRadius = 35; data.sectorLength = 50; data.sectorsCount = 10; data.sectorWidth = 20; data.color = 'white'; data.fullScreenOpacity = 0.8; var spinner = new Spinner (dati); spinner.create (); setTimeout (function () spinner.destroy ();, 6000); restituisce falso; Possiamo riutilizzare la variabile spinner tutte le volte che vogliamo.
Lo spinner dimostrato in questo tutorial può essere utilizzato in pagine Web progettate non solo per dispositivi mobili, ma anche per pagine Web "normali". Ho già provato questo con entrambi i metodi, e ha funzionato bene!
Per testare le tue conoscenze, puoi lavorare sul miglioramento dell'attuale implementazione dello spinner in alcuni modi unici. Ad esempio, puoi provare a cambiare il formato / forma delle sezioni, attivando il movimento in senso orario o antiorario, o consentire a uno sviluppatore di scegliere qualsiasi ID per lo spinner al fine di evitare conflitti di identificazione.
Questo è tutto per questa volta. Spero che questo tutorial ti sia piaciuto!
