Erstellen Sie einen Whirling-Timer mit HTML5-Canvas und Prototype.js

Inhalt

• Richten Sie eine schnelle Entwicklungsumgebung ein
• Einfache Diashow erstellen
• Unsere Leinwand einrichten
• Zeichnen eines einfachen Bogens mit der Canvas-API
• Erstellen der zeitgesteuerten Animation
• Ein Beispiel für eine "Epochen" -Berechnung
• Endgültige Umsetzung und Hausaufgaben

In einer Welt, in der JavaScript-Frameworks die DOM-Manipulation zwischen Browsern zum Kinderspiel machen, ist es nicht verwunderlich, dass JavaScript-basierte Diashows ihre Flash-gesteuerten Gegenstücke als Werkzeug der Wahl für Webdesigner, die Bilder auf ihren Websites präsentieren möchten, weitgehend ersetzt haben.

Dennoch gibt es nur wenige Skripte, die wirklich behaupten können, vollständige Funktionssätze bereitzustellen, die hinsichtlich der Benutzererfahrung für Besucher den besten Flash-gesteuerten Shows entsprechen.

In diesem kurzen Tutorial möchte ich zeigen, wie wir die Leistungsfähigkeit des Prototype.js-Frameworks und der HTML5-Zeichenfläche nutzen können, um eine einfache Diashow mit einem wirbelnden Timer zu verbessern und Besuchern, die eine Diashow anzeigen, ein besseres Feedback zu geben. Wir werden herausfinden, wie Sie die Canvas-Bogenmethode zum Zeichnen von Segmenten verwenden und wie Sie die Epochenzeit verwenden, um genaue Animationszeiten sicherzustellen.

Während dieses Tutorial Prototype.js verwendet, gibt es hier wirklich nichts, was Sie in jQuery (oder einer anderen JavaScript-Bibliothek) nicht emulieren könnten. Nach meiner Erfahrung ist es wertvoll, mit anderen Bibliotheken vertraut zu sein. Folgen Sie daher bitte und passen Sie den Code - falls erforderlich - später für Ihr bevorzugtes JS-Framework an.

Lass uns anfangen!

Richten Sie eine schnelle Entwicklungsumgebung ein

Zuerst müssen wir unsere Entwicklungsumgebung einrichten. Für diese einfache Demo habe ich mit drei Schlüsseldateien begonnen:

1. index.html - eine abgespeckte Version des HTML-Codes aus dem hervorragenden HTML5-Boilerplate-Projekt.
2. styles.css - die wichtigsten Stylesheets für unsere Demo. Ich habe auch eine reset.css-Datei angeschlossen, um sicherzustellen, dass wir mit einem gleichmäßigen Spielfeld beginnen.
3. show.js - die Haupt-JavaScript-Datei. Hier schreiben wir den größten Teil unseres JavaScript für dieses Tutorial (vergessen Sie dieses nicht!).

Stellen Sie nach dem Verknüpfen dieser Dateien sicher, dass Sie die neueste Google CDN-Version von Prototype.js aus der Datei index.html enthalten:

script src = "http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"> / script>

Einfache Diashow erstellen

Nachdem dies sortiert ist, springen wir hinein und erstellen eine einfache Diashow. Für die Zwecke dieses Tutorials benötigen wir nicht viele Funktionen, damit die Dinge schön und einfach bleiben. Glücklicherweise hatte Johnathon Snook vor drei Jahren eine ähnliche Anforderung und deshalb habe ich die einfachste jQuery-Diashow als Vorlage für unsere Prototype.js-Version verwendet.

Starten Sie show.js in Ihrem Texteditor und fügen Sie den folgenden Code hinzu:

var canvasShow = (Funktion (Fenster) {// Diashow-Code hier} (Fenster));

Wir beginnen mit Best Practices, die eine selbstaufrufende Funktion verwenden, um unsere Kernmethoden und -variablen vor dem globalen Geltungsbereich zu schützen. Dies stellt sicher, dass unser Skript nicht mit anderem Code in Konflikt steht, der möglicherweise bereits auf unserer Seite ausgeführt wird (Tipp: Für weitere Informationen zu diesem Muster und mehr empfehle ich Addy Osmanis Essential Javascript Design Patterns).

Nachdem dies geschehen ist, können wir mit dem Schreiben unseres grundlegenden Showcodes beginnen:

var canvasShow = (Funktion (Fenster) {/ * * * PRIVATE VARS * / var show, slide_list; / * * * INITIALISE * Richtet die erforderlichen Variablen ein und legt die Konfigurationsoptionen fest * Führt die Show aus * / function init (id) {// Verweis auf das show-Element abrufen show = $ (id); slide_list = show.down ('ul'); / * * * Alle Bilder auswählen, die nicht die ersten sind Bild und Verstecken jedes einzelnen * Ich verwende die wenig bekannte invoke () -Methode - eine große Bereicherung für Prototype.js * http://api.prototypejs.org/language/Enumerable/prototype/invoke/ * / slide_list.select ('li: not (: first)'). invoke ('hide'); // Show ausführen runShow ();} / * * * THE LOOP * Die Hauptshow-Schleife - zeigt und versteckt Folien und ordnet das DOM * / function runShow () neu an {var showLoop = setInterval (function () {// 1) Wählen Sie die neue erste Folie erneut aus und speichern Sie sie im Cache var first = slide_list.select ('li'). first (); // 2 ) Blenden Sie die erste Folie aus und zeigen Sie dann die nächste Folie an. Hide (). Next (). Show (); // 3) Hänge die erste Folie an das Ende der Liste an slide_list.insert (first); }, 3000); } / * * * REVEAL * "public" -Methoden zurückgeben * / return {init: init};} (Fenster)); Event.observe (Fenster, 'Laden', Funktion () {// Rufen Sie unsere auf Diashow canvasShow.init ('Diashow');});

Wir haben jetzt zwei Methoden in unserer Show. Das drin() Die Methode akzeptiert die ID des show-Elements, blendet alle bis auf die erste Folie aus und löst dann die aus runShow () Methode, die unsere kontrolliert show loop. Das runShow () Die Methode wiederholt einfach alle drei Sekunden die aktuelle erste Folie, zeigt die nächste Folie an und rangiert dann die ursprüngliche erste Folie bis zum Ende der Folie ul> Element.

Am Ende unseres Skripts kehren wir zurück drin() Es wird als öffentliche Methode verfügbar gemacht, die wir dann aufrufen, wenn unsere Seite (einschließlich Bilder) vollständig geladen ist.

Der Adler mit den Augen unter Ihnen hat vielleicht bemerkt, dass ich ihn nicht benutze setInterval () um unsere Schleife zu steuern. Stattdessen verwende ich die PeriodicalExecuter-Funktion von Prototype.js, die den Vorteil hat, uns vor mehreren parallelen Ausführungen unserer Show-Loop-Rückruffunktion zu schützen. Es ist ein nettes kleines Extra, das direkt in Prototype.js eingebrannt ist.

Das Testen unseres Codes im Browser zeigt, dass unsere einfache Diashow wie erwartet funktioniert. Es wird keine Preise gewinnen, aber es ist gut genug für unsere Zwecke.

Unsere Leinwand einrichten

Jetzt ist es an der Zeit, unser Canvas-Element zu erstellen und es für das Zeichnen des Fortschritts-Timers vorzubereiten. Zu diesem Zweck haben wir eine neue Methode hinzugefügt setupTimer () Beim Testen der Canvas-Unterstützung wird das Canvas-Element dynamisch erstellt und der 2D-Kontext erfasst, falls es gefunden wird:

Funktion setupTimer () {canvas = document.createElement ('canvas'); if (canvas.getContext && canvas.getContext (’2d’)) {// auf Canvas-Unterstützung prüfen canvas.width = 30; canvas.height = 30; ctx = canvas.getContext (’2d’); ctx.strokeStyle = "rgba (255,255,255, .8)"; ctx.lineCap = "butt"; ctx.lineWidth = 4; canvas.writeAttribute ("Klasse", "Timer"); show.insert (Leinwand); } else {// wenn keine Canvas-Unterstützung verfügbar ist canvas = false; }}

Wir haben auch einige grundlegende Stile für unsere Timer-Grafik mithilfe der entsprechenden Canvas-API-Methoden festgelegt. Es gibt viele gute Tutorials, die die Grundlagen des Zeichnens mit der Canvas-API dokumentieren. Ich werde Sie also nicht langweilen, wenn Sie hier über alten Boden gehen.

Nach Abschluss dieser Grundeinstellung können wir nun unsere Timer-Grafik auf unsere Leinwand zeichnen.

Zeichnen eines einfachen Bogens mit der Canvas-API

Der wirbelnde Timer, den wir erstellen möchten, ist eine klassische 360-Grad-Donutform, die in ihrer Form einigen AJAX-Lade-GIFs ähnelt, die üblicherweise im Internet verwendet werden.

Um den Fortschritt der Zeit anzuzeigen, lassen wir unser Skript die Segmente (Grad) der Donutform dynamisch zeichnen, beginnend bei 0 und weiter bis zur vollen 360 Grad. Dieser vollständige Kreis zeigt den Zeitverlauf zwischen der aktuellen Folie an Anfang der Show-Schleife (die Show-Schleife ist Teil der runShow () Methode aus Schritt 2) und es wird zugunsten der nächsten Folie an der versteckt Ende der Show-Schleife.

Als erstes müssen wir eine Funktion erstellen, die einen Bogen auf unsere Leinwand zeichnet. Dazu verwenden wir die arc-Methode der Canvas-API. Wenn Sie mit dieser Methode nicht vertraut sind, empfehle ich Ihnen dringend, den Abschnitt "Kreis" in Rob Hawkes 'ausgezeichnetem Netmag-Artikel zu lesen LernendasGrundlagenvonHTML5 Segeltuch Das hat eine tolle Erklärung und Übersicht.

Unsere Funktion zum Zeichnen von Bögen lautet wie folgt:

Funktion drawArc (startAngle, endAngle) {var drawArc = true; // setze einen booleschen Wert, um zu zeigen, dass wir zeichnen // Definiere unseren Pfad mit APIctx.beginPath (); ctx.arc (15, 15, 10, Math.PI / 180) * (startAngle-90), (Math.PI / 180) * (endAngle-90), false); ctx.stroke (); // auf die Leinwand zeichnen drawArc = false; }}

Unsere Funktion verwendet zwei Argumente, die das definieren Start und Ende Winkel des Bogens (in Grad). Diese werden wiederum als 4. und 5. Argument an die arc-Methode der Canvas-API übergeben. Da die Bogenmethode erwartet, dass der Start- und der Endwinkel im Bogenmaß angegeben werden, bearbeiten wir die Eingaben auf zwei Arten, bevor sie als Argumente übergeben werden:

1. Wir verwenden einen einfachen Ausdruck, um unsere Grade im laufenden Betrieb in Bogenmaß umzuwandeln (Bogenmaß = Grad * PI / 180). Dies ermöglicht es uns, Eingaben in Graden zu liefern, die meiner Meinung nach in diesem Zusammenhang einfacher sind als das, was wir erreichen wollen.
2. Da der 0-Winkel standardmäßig 3 Uhr ist (wenn wir uns einen Kreis als Zifferblatt vorstellen), subtrahiere ich 90 vom Start- und Endwinkel, um 0 Grad bei 12 Uhr und 90 Grad bei zu haben 3 Uhr, 180 Grad um 6 Uhr und so weiter ...

Wir können unsere Funktion testen, indem wir Folgendes in unsere Liste aufnehmen drin() Funktion:

drawArc (0,90); // zeichnet einen Bogen von 0 Grad bis 90 Grad

Erstellen der zeitgesteuerten Animation

Wir können jetzt jedes Segment (Bogen) unseres Timers mit unserem zeichnen drawArc () Funktion. Um unseren Timer um 360 Grad zu animieren, brauchen wir einfach eine Möglichkeit, den aufzurufen drawArc () Funktion wiederholt und erhöht das zweite Argument (endAngle), bis es 360 erreicht.

Die einzige Einschränkung besteht darin, dass wir sicherstellen müssen, dass unsere Animation beendet wird genau 3.000 Millisekunden als - wenn Sie sich unsere Show-Schleife ansehen - dies ist das Intervall zwischen dem Erscheinen einer Folie und der nächsten Folie, die sie ersetzt.

Wie animieren wir? Ihr erster Gedanke könnte sein, dies mit einer for-Schleife zu tun, aber das erlaubt uns nicht, den Fortschritt der Animation zu kontrollieren, damit wir diese Methode rabattieren können. Die nächste Lösung könnte darin bestehen, JavaScript zu verwenden setIntervalDies ist jedoch keine genaue Methode zur Zeitmessung, da sie von der CPU-Auslastung des Computers des Benutzers abhängt. Zum Glück haben wir eine bessere Lösung - Epochenzeit.

Mit der Epochenzeit können wir eine Dezimalstellenvariable basierend auf einer imaginären Animationslinie berechnen, die von Null (Beginn der Animation) bis Eins (Ende der Animation) verläuft. Durch Multiplizieren dieser Dezimaldarstellung unserer aktuellen Position mit unserem endgültigen Ziel (dh: 360) können wir bestimmen, welchen Wert wir als endAngle an unseren übergeben sollen drawArc () Methode.

Die Verwendung der Epochenzeit ist relativ einfach und wird in unserer implementiert runTimer () Methode unten.

Funktion runTimer () {clearCanvas (); // Stellen Sie sicher, dass wir die Zeichenfläche gelöscht haben, um ein Überzeichnen zu vermeiden. // Verwenden Sie die Epochenzeit, um sicherzustellen, dass der Code in der angegebenen Zeit ausgeführt wird. var start = (neues Datum) .getTime (), // gibt die Epochenzeit zurück, z. B.: "1327253227656" Dauer = 3000 * 0,75, // das Intervall zwischen den einzelnen Folienübergängen = Start + Dauer; var tInterval = setInterval (function () {clearCanvas (); // Sicherstellen, dass wir die Zeichenfläche gelöscht haben, um ein Überzeichnen von canvas.removeClassName ('canvas-hidden') zu vermeiden; var currTime = (neues Datum) .getTime (); / / Die aktuelle "Zeit" als Epoche abrufen // Die Zeitepoche mit der Endepoche vergleichen // Die Position als Dezimalzahl zurückgeben (z. B. 0,35678) // pos liegt zwischen 0 (Anfang) und 1 (Ende) var pos = currTime> finish ? 1: (currTime-start) / duration; var seg = Math.floor (356 * pos); // liefert den Endwinkel in Grad // Zeichne unser Bogensegment drawArc (-4, seg); if (pos> = 1) {// Wenn wir unser Ziel erreicht haben, stoppen Sie die Schleife! ClearInterval (tInterval); resetTimer ();}}, 50)}

Wir werden die wichtigsten Schritte wie folgt aufteilen.

Nach dem ersten Löschen der Zeichenfläche legen wir einige Schlüsselvariablen fest. Zunächst erhalten wir eine epochale Darstellung der aktuellen Zeit mithilfe der getTime () -Methode des nativen Date-Objekts von JavaScript und weisen sie der Startvariablen zu. Dies ist der 0 [Null] -Punkt auf unserer Animationslinie.

var start = (neues Datum) .getTime (); // gibt Epoche zurück

Als nächstes stellen wir die Dauer unserer Animation so ein, dass sie der Dauer unserer Show-Schleife entspricht. Dadurch wird sichergestellt, dass die Dauer der Timer-Animation dem Intervall zwischen den Folienübergängen entspricht.

var Dauer = 3000;

Zuletzt berechnen wir die Zielvariable mit Hinzufügen die Dauer bis zur Startzeit. Dies stellt das Ende unserer Animation dar (eine in unserer Animationszeile).

var finish = start + dauer;

Als nächstes erstellen wir eine interne Schleife mit setInterval und bitte es zu wiederholen sehr schnell (alle 50 Millisekunden).

Für jede Schleife fordern wir die aktuelle Zeit an (currTime) mit Zeit bekommen(). Wenn die aktuelle Zeit ist größer Als die zuvor berechnete Endzeit haben wir das Ende unserer Animation erreicht. Andernfalls subtrahieren wir die Startzeit von unserer aktuellen Zeit und dividieren diese durch unsere bekannte Dauer, um a zu erzeugen Dezimaldarstellung unserer Position in der Animationszeile.

var currTime = (neues Datum) .getTime (); var pos = currTime> beenden? 1: (currTime-start) / dauer;

Für den letzten Schritt in unserer Schleife multiplizieren wir 360 (den Gesamtumfang unseres Timers) mit unserem Position in der Animationszeile, um einen Wert zu erzeugen, an den wir dann als zweites Argument übergeben drawArc (). Dadurch wird das erforderliche Segment unserer Timer-Grafik gezeichnet und der gesamte Vorgang wiederholt sich, bis der gesamte 360-Grad-Timer-Kreis gezeichnet ist.

Ein Beispiel für eine "Epochen" -Berechnung

Ein einfaches Beispiel kann hier helfen. Wenn wir sagen, dass unsere Startzeit 8034 war und für diese Iteration unserer Schleife die currTime-Variable auf 8745 gesetzt ist, dann:

(8745-8034)/3000

= 0.237

360 * 0.237 = 85 // Unser Endwert 85 ist das, woran übergeben wird drawArc ()

Zum Glück für mich (und Sie) musste ich mir diese Mathematik nicht ausdenken, um genaue Animationen zu berechnen. Viel klügere Leute haben dies bereits für uns getan. Ich empfehle dringend, diese Präsentation von Thomas Fuchs, dem Kernteammitglied von Prototype.j, zu lesen, in der alles über zeitbasierte Animationen in der Epoche ausführlicher erklärt wird.

Endgültige Umsetzung und Hausaufgaben

Wir haben jetzt einen funktionierenden Timer auf Canvas-Basis mit Prototype.js und der HTML5-Canvas-API erstellt. Der endgültige Arbeitscode kann durch Herunterladen der Quelldateien für dieses Lernprogramm angezeigt werden.

Wie Sie sehen können, ruft unsere Show-Schleife jetzt auf runTimer () am Ende jeder Iteration. Dies wiederum animiert unseren Canvas-Timer innerhalb von genau drei Sekunden von 0 auf 360 Grad, bevor unsere Show-Schleife erneut aufgerufen wird und sich der gesamte Vorgang wiederholt.

Sie können den endgültigen Code hier in Aktion sehen [Link zur Demo]. Ich würde auch empfehlen, den Quellcode für diesen Artikel herunterzuladen und die endgültige Implementierung zu studieren. Ich habe versucht, die Dinge einfach zu halten, und deshalb ist es keineswegs perfekt, aber es sollte Ihnen eine gute Basis bieten, auf der Sie arbeiten können, wenn Sie Ihre eigenen Skripte verbessern möchten.

Für diejenigen unter Ihnen, die nach Möglichkeiten suchen, den endgültigen Code zu verbessern, kann ich die folgenden Untersuchungslinien vorschlagen:

• Fügen Sie einen "Spur" -Bereich für den Timer hinzu, indem Sie einen halbtransparenten, vollständigen 360-Grad-Timer auf eine zweite Leinwand zeichnen, die hinter der ersten liegt. Eine schöne visuelle Verbesserung.
• Refaktorieren und optimieren Sie den Code, um sicherzustellen, dass sowohl der Timer als auch die Show-Schleife von einer einzigen Variablen für die Dauer ausgeführt werden. Dies macht den endgültigen Code übersichtlicher, wenn Sie das Intervall zwischen den einzelnen Folien ändern möchten.
• Bieten Sie einen Fallback für Browser, die keine Leinwand unterstützen. Die Designagentur Zurb hat für ihre Orbit-Diashow eine CSS-basierte Timer-Lösung verwendet.
• Schreiben Sie eine Methode, um den Timer am Ende jeder Show-Schleife auszublenden und am Anfang wieder einzublenden.

Wenn Sie einige dieser Funktionen in Aktion sehen möchten, sollten Sie sich Protoshow ansehen - eine einfache (aber leistungsstarke) Diashow, die ich mit Prototype.js und der Schwesteranimationsbibliothek script.aculo.us geschrieben habe.

Protoshow.js ist der Nachfolger des Simple Slide Show-Skripts von Deep Blue Sky und wird regelmäßig weiterentwickelt. Ich würde gerne Leute finden, die zu dem Projekt beitragen können. Wenn Sie sich beteiligen möchten, besuchen Sie mich bitte auf GitHub oder schreiben Sie mir eine Nachricht auf Twitter.

Viel Glück beim Verbessern Ihrer Skripte und senden Sie mir bitte Ihre Beispielimplementierungen in freier Wildbahn!