Share
Dieses Tutorial führt Sie durch die Entwicklung eines einfachen SVG-Laderings für mobile Websites. Visuelle Indikatoren wie der in diesem Lernprogramm integrierte Spinner dienen zur Anzeige von Hintergrundaktivitäten und sind ein entscheidender Bestandteil eines überzeugenden User Experience-Designs!
In diesem Lernprogramm wird davon ausgegangen, dass Sie bereits Grundkenntnisse in SVG (Scalable Vector Graphics), HTML, CSS, JavaScript und jQuery besitzen. Der Inhalt wird jedoch schrittweise dargestellt und sollte leicht nachvollziehbar sein.
Was ist mit Raphaël?? Wir werden das Raphaël-Projekt zur Durchführung der SVG-Zeichnung in diesem Tutorial verwenden. Um von der offiziellen Raphaël-Projektwebsite zu zitieren:
Raphaël verwendet die SVG W3C Recommendation und VML als Basis für die Erstellung von Grafiken. Dies bedeutet, dass jedes grafische Objekt, das Sie erstellen, auch ein DOM-Objekt ist. Sie können daher JavaScript-Ereignishandler hinzufügen oder sie später ändern. Raphaël hat es sich zum Ziel gesetzt, einen Adapter bereitzustellen, der das Zeichnen von Vektorgrafiken kompatibel mit dem Browser und einfach macht.
Um Raphaël in Ihrem Projekt zu verwenden, müssen Sie nur die folgenden Schritte ausführen:
var paper = Raffael (divID, width, height);
Accentsconagua
// Erzeugt einen Kreis bei x = 50, y = 40, mit einem Radius von 10 var circle = paper.circle (50, 40, 10); // Setzt das Füllattribut des Kreises auf rot (# f00) circle.attr ("fill", "# f00");  Genug der Theorie! Beginnen wir mit der Codierung!
Beginnen wir mit dem Erstellen unserer Demo-Seite in HTML. Es sollte wie folgt aussehen:
Laden des Spinner-Beispiels Entfessle die Kraft der Ladeschleuder.
Zu guter Letzt fügen wir einen Link hinzu, über den Sie klicken können, um den Spinner zu "entfesseln" (d. H. Die Animation zu starten)..
Entfessle die Kraft der Ladeschleuder.
Nun, da wir unser Markup fertig haben, müssen wir den fehlenden Stil ausfüllen.
In Bezug auf CSS muss das äußerste div (d. H.) Schwarz sein und den gesamten Bildschirm über allen Elementen einnehmen, die nicht zum Spinner gehören.
Die anderen beiden Divs (d. H. Und) verwenden einen leichten "Hack", um den Spinner in der Mitte des Bildschirms richtig zu zentrieren, unabhängig von der Bildschirmgröße oder dem Bildlauf. Ich werde es in diesem Tutorial nicht erklären, da sich CSS nur auf eine "Dummy" -Demoseite bezieht, nicht auf den zentralen Zweck dieses Tutorials.
Am Ende sollte die Datei spinner.css so aussehen:
#spinnerFullScreen display: none; Breite: 100%; Höhe: 100%; Position: feststehend; oben: 0px; links: 0px; Hintergrundfarbe: schwarz; Deckkraft: 0; z-Index: 9999998; #floater display: table; Breite: 100%; Höhe: 100%; #spinner Anzeige: Tabellenzelle; vertikal ausrichten: Mitte; Text ausrichten: Mitte; z-Index: 9999999;
Theoretisch besteht unser Spinner aus einer bestimmten Anzahl von Sektoren (8 im Bild), die eine Länge ("Sektorlänge") und eine Breite ("Sektorbreite") haben. Natürlich haben diese Sektoren auch einen Abstand zum Zentrum ("centerRadius").
Aber ist das statisch? Und was ist mit der Animation? Nun, die Animation ist nur ein kleiner Trick: Da alle Sektoropazitäten zwischen 0,0 und 1,0 liegen, ändern wir kontinuierlich die Opazität jedes Sektors, um mit der Opazität des nächsten Sektors übereinzustimmen. Verwirrt? Es wird wahrscheinlich transparenter, sobald Sie die Implementierung in JavaScript sehen.
Um eine wiederverwendbare Bibliothek zu erstellen, verwenden wir ein objektorientiertes Paradigma, das in JavaScript implementiert ist. Die Bibliothek ist um einen Konstruktor herum aufgebaut (Funktion Spinner (Daten)) und zwei verschiedene Funktionen:
In der zuvor erstellten Datei spinner.js erstellen wir zuerst den Konstruktor des Spinners, sodass der Benutzer der Bibliothek einige Werte festlegen kann, wie z. B. die Anzahl der Sektoren, die Entfernung der Sektoren zur Mitte usw..
/ ** * erstellt das Objekt Spinner mit Datenwerten oder Standardwerten, falls diese fehlen * @param data * @constructor * / function Spinner (data) // Anzahl der Sektoren des Spinners - default = 12 this.sectorsCount = data.sectorsCount || 12; // der Abstand von jedem Sektor zum Zentrum - default = 70 this.centerRadius = data.centerRadius || 70; // die Länge / Höhe jedes Sektors - Standard = 120 this.sectorLength = data.sectorLength || 120; // die Breite jedes Sektors des Spinners - default = 25 this.sectorWidth = data.sectorWidth || 25; // Farbe des Spinners - default = white this.color = data.color || 'Weiß'; // die Deckkraft des Vollbildschirms this.fullScreenOpacity = data.fullScreenOpacity; // Array von Spinnersektoren, jeder Spinner ist ein svg-Pfad this.sectors = []; // Array mit der Deckkraft jedes Sektors this.opacity = []; // das Raphael Spinner-Objekt this.spinnerObject = null; // ID der Timeout-Funktion für die rotierende Animation this.spinnerTick = null;
Nun zu der größten Methode des Spinnerobjekts, der Create-Methode. Diese Methode wird jedes Mal aufgerufen, wenn der Benutzer den Spinner anzeigen möchte. Beachten Sie die Verwendung von jQuery, um unsere Elemente auszuwählen. Hier kommen die oben genannten Ids herein:
Spinner.prototype.create = function () // zeigt den Vollbild-Spinner div $ ('# spinnerFullScreen'). Show (); // animiert die Deckkraft des Vollbild-Divs mit dem Spinner von 0 bis 0,8 $ ('# spinnerFullScreen'). animate (Deckkraft: this.fullScreenOpacity, 1000, function () ); Wenn Sie mit der create-Methode fortfahren, führen wir einige anfängliche Berechnungen aus, z. B. die Gesamtgröße des Spinners, und bereiten das Raphael-Objekt vor, um die Abschnitte zu zeichnen:
// Mittelpunkt des Canvas- / Spinner- / Raphael-Objekts var spinnerCenter = this.centerRadius + this.sectorLength + this.sectorWidth; // Winkeldifferenz / Schritt zwischen jedem Sektor var beta = 2 * Math.PI / this.sectorsCount; // Parameter für jeden Sektor / Pfad (Strichfarbe, Strichbreite, Strichlinienkappe) var pathParams = "Strich": this.color, "Strichbreite": this.sectorWidth, "Strichlinienkappe": " rund "; / ** * erstellt das Raphael-Objekt mit einer Breite und einer Höhe *, die dem Doppelten des Spinnerzentrums entspricht. * "Spinner" ist die ID des div, in dem die Elemente gezeichnet werden. * / var paperSize = 2 * spinnerCenter; this.spinnerObject = Raphael ('Spinner', PaperSize, PaperSize); Als Nächstes werden der Zyklus und der Aufbau eines Arrays mit der aktuellen Deckkraft jedes Sektors gezeichnet:
// baut die Sektoren und die jeweilige Deckkraft auf (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);
Jetzt, da wir unseren Spinner gebaut und gezeigt haben, müssen wir ihn animieren. Dies ist der letzte Teil der Erstellungsmethode:
/ ** * führt einen Animationsschritt aus und ruft sich erneut auf * @param spinnerObject Dieser Parameter muss * übergeben werden, da der Gültigkeitsbereich geändert wird, wenn er durch die setTimeout-Funktion aufgerufen wird die Sektoren spinnerObject.opacity.unshift (spinnerObject.opacity.pop ()); // aktualisiert die Opazität der Sektoren für (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 Schließlich die Zerstörungsmethode unseres Spinners:
/ ** * zerstört den Spinner und verbirgt das Vollbild div * / Spinner.prototype.destroy = function () // stoppt die Animationsfunktion clearTimeout (this.spinnerTick); // entfernt das Raphael-Spinnerobjekt this.spinnerObject.remove (); this.spinnerObject = null; // animiert die Deckkraft des div wieder zu 0 und blendet sie am Ende aus (Anzeige: keine) $ ('# spinnerFullScreen'). animate (opacity: 0, 2000, function () $ ('# spinnerFullScreen') ).verbergen(); ); ; Wenn der rotierende Code installiert ist, ist es jetzt an der Zeit, ein Ereignis an den Link anzuhängen. Wenn der Benutzer darauf klickt, wird der Spinner für ein Intervall von 6 Sekunden angezeigt. Ich persönlich benutze dies für asynchrone Anfragen an den Server, und wenn die Anfrage beendet ist, entferne ich einfach den Spinner.
Beachten Sie, dass dieser Code nur verwendet werden kann, nachdem alle Bibliotheken geladen wurden, von denen der Spinner abhängig ist. Sie können diesen Code am Ende der Datei spinner.js oder in einer anderen JavaScript-Datei hinzufügen, wenn Sie die Datei spinner.js unabhängig und für andere Projekte wiederverwenden möchten.
$ (document) .ready (function () $ ('# createSpinner'). click (unleashSpinner);); Funktion unleashSpinner () var data = ; data.centerRadius = 35; data.sectorLength = 50; data.sectorsCount = 10; data.sectorWidth = 20; data.color = 'weiß'; data.fullScreenOpacity = 0,8; var spinner = neuer Spinner (Daten); spinner.create (); setTimeout (function () spinner.destroy ();, 6000); falsch zurückgeben; Wir können die Spinner-Variable beliebig oft wiederverwenden.
Der in diesem Lernprogramm vorgestellte Spinner kann in Webseiten verwendet werden, die nicht nur für mobile Geräte, sondern auch für "normale" Webseiten konzipiert sind. Ich habe das schon mit beiden Methoden versucht und es hat gut funktioniert!
Um Ihr Wissen zu testen, können Sie auf verschiedene Weise an der Verbesserung der aktuellen Implementierung von Spinner arbeiten. Sie können beispielsweise versuchen, das Format / die Form der Abschnitte zu ändern, die Bewegung im Uhrzeigersinn oder gegen den Uhrzeigersinn zu ermöglichen, oder einem Entwickler ermöglichen, eine beliebige ID für den Spinner auszuwählen, um ID-Konflikte zu vermeiden.
Das war es für diese Zeit. Ich hoffe, dir hat dieses Tutorial gefallen!
