Web mobile créer un spinner de chargement SVG

Dernier point, mais non le moindre, nous ajoutons un lien sur lequel vous pouvez cliquer pour "déchaîner" le spinner (c.-à-d. Commencer l'animation en rotation).

Étape 2: style CSS

Maintenant que le balisage est prêt, nous devons commencer à remplir le style manquant..

En termes de CSS, la division la plus externe (c'est-à-dire) doit être noire et occuper tout l'écran au-dessus de tous les éléments n'appartenant pas à la roulette..

Les deux autres divs (c'est-à-dire et) utilisent un léger "hack" afin de centrer correctement la visière au milieu de l'écran, quelle que soit la taille de l'écran ou l'emplacement du défilement. Je ne l'expliquerai pas dans ce didacticiel, car le CSS ne concerne qu'une page de démonstration "factice" et non l'objectif principal de ce didacticiel..

En fin de compte, le fichier spinner.css devrait ressembler à ceci:

 #spinnerFullScreen display: none; largeur: 100%; hauteur: 100%; position: fixe; en haut: 0px; gauche: 0px; couleur de fond: noir; opacité: 0; z-index: 9999998;  #floater display: table; largeur: 100%; hauteur: 100%;  #spinner display: table-cell; alignement vertical: milieu; text-align: center; z-index: 9999999; 

Étape 3: Ajouter un comportement avec JavaScript

En théorie, notre casserole est composée d'un certain nombre de secteurs (8 dans l'image) qui ont une longueur ("sectorLength") et une largeur ("sectorWidth"). Bien sûr, ces secteurs ont également une distance au centre ("centerRadius").

Mais est-ce statique? Et qu'en est-il de l'animation? L’animation n’est qu’une petite astuce: avec toutes les opacités du secteur allant de 0,0 à 1,0, nous modifions continuellement l’opacité de chaque secteur pour qu’elle soit égale à celle du secteur suivant. Confus? Cela deviendra probablement plus transparent une fois que vous verrez l'implémentation en JavaScript.

Pour créer une bibliothèque réutilisable, nous allons utiliser un paradigme orienté objet implémenté en JavaScript. La bibliothèque est construite autour d'un constructeur (fonction Spinner (données)) et deux fonctions distinctes:

• créer - en utilisant les variables d'instance définies dans le constructeur, il construit le spinner SVG et l'anime également.
• détruire - détruit le spinner SVG et masque l'affichage en plein écran.

Dans le fichier spinner.js créé précédemment, nous créons d’abord le constructeur de Spinner, ce qui permet à l’utilisateur de la bibliothèque de définir des valeurs telles que le nombre de secteurs, la distance qui sépare les secteurs du centre, etc..

 / ** * crée l'objet Spinner avec des valeurs de données ou des valeurs par défaut s'il manque. * @param data * @constructor * / function Spinner (data) // nombre de secteurs de spinner - default = 12 this.sectorsCount = data.sectorsCount || 12; // distance entre chaque secteur et le centre - valeur par défaut = 70 this.centerRadius = data.centerRadius || 70; // la longueur / hauteur de chaque secteur - défaut = 120 this.sectorLength = data.sectorLength || 120; // la largeur de chaque secteur du disque - default = 25 this.sectorWidth = data.sectorWidth || 25; // couleur du disque - default = blanc this.color = data.color || 'blanc'; // l'opacité du fullScreen this.fullScreenOpacity = data.fullScreenOpacity; // tableau de secteurs de spinner, chaque spinner est un chemin svg this.sectors = []; // tableau avec l'opacité de chaque secteur this.opacity = []; // l'objet raphael spinner this.spinnerObject = null; // id de la fonction de délai d'attente pour l'animation tournante this.spinnerTick = null; 

Passons maintenant à la plus grande méthode de l'objet spinner, la méthode create. Cette méthode est appelée à chaque fois que l'utilisateur veut afficher le compteur. Notez l'utilisation de jQuery pour sélectionner nos éléments. C'est ici que les identifiants dont nous avons parlé ci-dessus entrent en jeu:

 Spinner.prototype.create = function () // affiche le plein écran spinner div $ ('# spinnerFullScreen'). Show (); // anime l'opacité de la div en plein écran contenant le spinner de 0 à 0,8 $ ('# spinnerFullScreen'). animate (opacity: this.fullScreenOpacity, 1000, function () );

En continuant avec la méthode create, nous effectuons quelques calculs initiaux, tels que la taille totale de la roulette, et préparons l'objet Raphael pour dessiner les sections:

 // centre de l'objet canvas / spinner / raphael var spinnerCenter = this.centerRadius + this.sectorLength + this.sectorWidth; // différence d'angle / pas entre chaque secteur var beta = 2 * Math.PI / this.sectorsCount; // paramètres pour chaque secteur / chemin (couleur de trait, largeur de trait, trait de ligne) var pathParams = "accident vasculaire cérébral": this.color, "largeur de trait": this.sectorWidth, "trait de linecap": " rond" ; / ** * crée l'objet Raphael avec une largeur et une hauteur * égales au double du centre de la roulette * «spinner» est l'id de la div où les éléments seront dessinés * / var paperSize = 2 * spinnerCenter; this.spinnerObject = Raphael ('spinner', paperSize, paperSize);

Vient ensuite le dessin du cycle et la construction d’un tableau avec l’opacité actuelle de chaque secteur:

 // construit les secteurs et l'opacité respective de (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); 

Maintenant que notre spinner est construit et affiché, nous devons l'animer. Ceci est la dernière partie de la méthode create:

 / ** * effectue une étape d'animation et appelle à nouveau * @param spinnerObject. Ce paramètre doit être transmis * en raison des modifications de portée lorsqu'il est appelé via la fonction setTimeout * / (fonction animationStep (spinnerObject) // déplace vers la droite l'opacité de les secteurs spinnerObject.opacity.unshift (spinnerObject.opacity.pop ()); // met à jour l'opacité des secteurs pour (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

Enfin, la méthode destroy de notre spinner:

 / ** * détruit le disque et cache le plein écran div * / Spinner.prototype.destroy = function () // arrête la fonction d'animation clearTimeout (this.spinnerTick); // supprime l'objet spinner Raphael this.spinnerObject.remove (); this.spinnerObject = null; // anime à nouveau l'opacité de la div sur 0 et la cache (affichage: aucun) à la fin $ ('# spinnerFullScreen'). animate (opacité: 0, 2000, function () $ ('# spinnerFullScreen' ).cacher(); ); ;

Étape 4: Libérez le pouvoir!

Avec le code tournant en place, il est maintenant temps d’attacher un événement au lien. Ainsi, lorsque l’utilisateur clique dessus, nous affichons le compteur pendant 6 secondes. Personnellement, je l'utilise pour les requêtes asynchrones au serveur, et lorsque la requête est terminée, je supprime simplement le compteur..

Notez que ce code ne peut être utilisé qu'après le chargement de toutes les bibliothèques dont dépend le compteur. Vous pouvez ajouter ce code à la fin du fichier spinner.js ou dans un autre fichier JavaScript si vous souhaitez que le fichier spinner.js soit indépendant et réutilisable pour d'autres projets..

 $ (document) .ready (function () $ ('# createSpinner'). click (unleashSpinner);); fonction 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 (données); spinner.create (); setTimeout (function () spinner.destroy ();, 6000); retourne faux; 

Nous pouvons réutiliser la variable spinner autant de fois que nous le voulons.

Emballer

Le spinner présenté dans ce didacticiel peut être utilisé dans des pages Web conçues non seulement pour des appareils mobiles, mais également pour des pages Web "normales". J'ai déjà essayé cela avec les deux méthodes, et cela a bien fonctionné!

Afin de tester vos connaissances, vous pouvez travailler à l’amélioration de la mise en œuvre actuelle de spinner de plusieurs manières uniques. Par exemple, vous pouvez essayer de changer le format / la forme des sections, permettant un mouvement horaire ou anti-horaire, ou permettre à un développeur de choisir n'importe quel identifiant pour le compteur afin d'éviter des conflits d'identifiant..

C'est tout pour cette fois. J'espère que vous avez apprécié ce tutoriel!