Share
In diesem Tutorial erstellen wir eine animierte Flip-Down-Uhr, die von den 70ern inspiriert wurde. Mit dem Mootools-Framework versuchte ich, die Flip-Aktion der Pads so zu simulieren, dass sie so lebensecht wie möglich ist. Mit seinem Retro-Design könnte es eine wirklich nette Sache sein, Ihre Website hinzuzufügen, also lassen Sie uns loslegen!
Die Uhr besteht aus drei Gruppen von Bildern: Stunden, Minuten und Sekunden, die in einen oberen und einen unteren Teil aufgeteilt sind, so dass wir den "Flip" -Effekt erzielen können. Die Hauptanimation besteht darin, die Höhe des oberen Teils von 100% auf 0% zu reduzieren und dann die Höhe des unteren Teils für jede Gruppe, in der sich eine Ziffer ändert, von 0% auf 100% zu erhöhen. Hier ist das grundlegende Schema.
Zuerst müssen wir unsere Bilder erstellen.
Wähle das "Rounded Ractangle Tool" (U) aus, setze den Radius auf 10px und die Farbe auf # 0a0a0a und erstelle ein 126px mal 126px-Rechteck. Du kannst die Bemaßung nach deinen Bedürfnissen ändern, einfach eine gerade Zahl beibehalten. Resterisieren Sie die Form, indem Sie auf Ebene> Rasterisieren> Form oder Rechtsklick> Ebene rastern gehen. Jetzt wollen wir diese "Lücke" zwischen den beiden Teilen schaffen und den oberen Hintergrund etwas heller machen. Platzieren Sie eine Hilfslinie an der horizontalen Hälfte unseres Pads, wählen Sie dann das Lochpad (Strg + Klicken auf das Ebenensymbol) und wählen Sie mit dem Rectangular Marquee Tool (M) die obere Hälfte im Schnittmodus (halten Sie die Umschalttaste + Alt gedrückt). Jetzt müssen wir nur noch die Auswahl mit # 121212 mit dem Paint Bucket Tool (G) füllen. Zeichnen Sie als Nächstes eine 2px schwarze Linie mit Hilfe unserer Hilfslinie auf einer separaten Ebene.
Nun müssen wir die Ziffern hinzufügen. Erstellen Sie mit dem Textwerkzeug (T) eine neue Ebene mit den Ziffern und platzieren Sie sie unter der zuvor erstellten Zeile.
Fügen Sie einfach eine kleine Überlagerung zu den Zahlen hinzu, um sie ein bisschen realistischer aussehen zu lassen. Erstellen Sie eine neue Ebene über der Ziffernebene, wählen Sie den unteren Teil des Pads aus und füllen Sie mit # b8b8b8, und füllen Sie dann den oberen Teil mit # d7d7d7. Stellen Sie jetzt den Mischmodus auf "Multiplizieren".
OK. Jetzt, da wir unser fertiges Pad haben, müssen wir es aufteilen. Die Hauptidee besteht darin, die rechte Ziffer von der linken zu trennen. Anstatt 60 Bilder für die Minuten- und Sekundengruppe zu haben, erhalten Sie 20 Bilder, die wir für beide Gruppen verwenden werden. Grundsätzlich müssen wir unser Pad in 4 Bilder mit den gleichen Abmessungen aufteilen. Ich habe das Crop Tool (C) für diesen Job verwendet.
Nachdem Sie das Pad beschnitten haben, ändern Sie die Ziffer und speichern Sie jedes Mal als separate .png-Datei, so dass Sie alle benötigten Dateien erhalten (Zahlen von 0 - 9). Wiederholen Sie diesen Schritt für alle Teile des Pads. Beachten Sie, dass Sie für das Stundenfeld die Ziffern nicht trennen, sondern nur den oberen und den unteren Teil. Am Ende ist hier unsere Ordnerstruktur ("Double" für Minuten und Sekunden, "Single" für Stunden):
Nun, da wir unsere Dateien bereit haben, können wir mit dem Programmieren beginnen. Zunächst benötigen wir zwei Container für unsere Bilder, einen für den "UpperPart" unserer Uhr und einen für den "LowerPart"..
Als nächstes fügen wir die Bilder hinzu. Hier ist ein Schema mit den IDs, die ich verwendet habe:
Ich musste ein transparentes Abstandhalterbild verwenden, das 1 Pixel breit und in der gleichen Höhe wie die anderen Bilder ist, um zu verhindern, dass die Behälter schrumpfen, wenn die Pads umdrehen. Es darf auch kein Leerzeichen zwischen den Bildern derselben Gruppe sein (z. B. "MinutenUpLeft" und "MinutenUpRight")..
OK. Dies sind die vorderen Pads unserer Uhr, die nach unten klappen werden. Jetzt müssen wir die hinteren aufstellen. Wenn die vorderen Pads umdrehen, werden die neuen Ziffern auf ihnen angezeigt. Wir werden das, was wir bisher gemacht haben, in ein div einpacken und es einfach über sich selbst kopieren, zu jedem Bild das Wort "Zurück" hinzufügen und zur entsprechenden Quelldatei wechseln.
Hier ist die vollständige .html-Datei mit Verweis auf das Stylesheet und die Javascript-Datei "animate.js", in der die Animation erstellt wird.
Erstellen Sie eine animierte Flip Down-Clock 
Das wichtigste, was wir jetzt tun müssen, ist, die Divs "Front" und "Back" zu überlappen. Zuerst positionieren wir die Hauptverpackung dort, wo wir sie brauchen, und geben dann beiden Containern die gleiche absolute Position.
#wrapper position: absolut; oben: 100px; links: 400px; #front, #back position: absolut; oben: 0px;
Jetzt müssen wir den oberen Teil vertikal nach unten und den unteren Teil nach oben ausrichten, damit die Pads so aussehen, als wären sie in der Mitte der Uhr verankert. Ich habe die Höhen- und Sichtbarkeitseigenschaften für die vorderen Teile hinzugefügt, da wir sie später für die Animation benötigen.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relativ; Höhe: 63px; vertikal ausrichten: unten; Sichtbarkeit: sichtbar; #lowerPart img position: relativ; Höhe: 63px; vertikal ausrichten: oben; Sichtbarkeit: sichtbar; #lowerPartBack img position: relativ; vertikal ausrichten: oben; #upperPartBack img position: relativ; vertikal ausrichten: unten;
Schließlich müssen wir nur die Breite der Pads einschränken, da wir nur mit ihrer Höhe herumspielen wollen. Wenn Sie eines davon ändern, wird das Bohrungsbild standardmäßig skaliert.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Hier ist alles zusammen:
Körper Hintergrund: # 000; #wrapper position: absolut; oben: 100px; links: 400px; #front, #back position: absolut; oben: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relativ; Höhe: 63px; vertikal ausrichten: unten; Sichtbarkeit: sichtbar; #lowerPart img position: relativ; Höhe: 63px; vertikal ausrichten: oben; Sichtbarkeit: sichtbar; #lowerPartBack img position: relativ; vertikal ausrichten: oben; #upperPartBack img position: relativ; vertikal ausrichten: unten; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Zunächst benötigen wir einige Variablen, um die auf den Pads angezeigte Zeit zu speichern. Hinweis: h = Stunden, m1 = linke Minutenzahl, m2 = rechte Minutenzahl, s1 = linke Sekunde, s2 = rechte Sekunde.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Jetzt erstellen wir eine Funktion, die im Sekundentakt läuft und unsere Uhr aktualisiert. Zuerst erhalten wir die aktuelle Uhrzeit und bestimmen die Uhrzeit (AM oder PM).
Funktion retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; wenn (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
Dann vergleichen wir sie mit der auf den Pads angezeigten Zeit und ändern, welche Gruppe anders ist. Es verwendet eine Funktion namens "Flip", die ich gleich beschreiben werde.
Accentsconagua
if (h! = h_current) flip ('hoursUp', 'hoursDown'), h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_strom = h; if (m2! = m2_current) flip ('minutesUpRight', 'minutesDownRight', m2, 'Double / Up / Right /', 'Double / Down / Right /'); m2_current = m2; Flip ('MinutenUpLeft', 'MinutenDownLeft', m1, 'Double / Up / Left /', 'Double / Down / Left /'); m1_strom = m1; if (s2! = s2_current) flip ('secondsUpRight', 'secondsDownRight', s2, 'Double / Up / Right /', 'Double / Down / Right /'); s2_current = s2; Flip ('secondsUpLeft', 'secondsDownLeft', s1, 'Double / Up / Left /', 'Double / Down / Left /'); s1_current = s1; // retroClock beenden Nun die Flip-Funktion. Es hat einige Parameter: upperId, lowerId = die IDs der oberen und unteren Pads, die umgedreht werden; changeNumber = der neue Wert, der angezeigt wird; pathUpper, pathLower = die Pfade zu den Quelldateien für den neuen Wert. Die Animation besteht aus den folgenden Schritten:
Das vordere obere Pad nimmt den Wert des hinteren an und wird sichtbar gemacht, wobei es überlagert wird. Das untere Pad wird ebenfalls sichtbar gemacht, aber seine Höhe wird auf 0px geändert.
Funktionsumkehrung (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("Sichtbarkeit", "sichtbar"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("Sichtbarkeit", "sichtbar"); Jetzt ändern wir das hintere obere und vordere untere Pad auf den neuen Wert.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png";
Mit diesem Setup können wir die eigentliche Animation starten. Wie ich bereits erwähnt habe, besteht es darin, die Höhe des vorderen oberen Teils auf 0% (0px) zu reduzieren und die Höhe des vorderen unteren Teils auf 100% (63px) zu erhöhen. Nachdem die Animation abgeschlossen ist, nimmt das hintere untere Pad den neuen Wert und die vorderen Pads werden ausgeblendet.
var flipUpper = new Fx.Tween (upperId, duration: 200, Übergang: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = neuer Fx.Tween (lowerId, duration: 200, Übergang: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("Sichtbarkeit", "ausgeblendet"); $ (UpperId) .setStyle ("Sichtbarkeit") , "versteckt");); flipLower.start ('height', 64);; flipUpper.start ('height', 0); // Flip beenden Als letztes müssen wir unsere Hauptfunktion im Sekundentakt ausführen lassen.
setInterval ('retroClock ()', 1000) ;; Hier ist alles zusammen.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; Funktionsumkehrung (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("Sichtbarkeit", "sichtbar"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("Sichtbarkeit", "sichtbar"); $ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png"; var flipUpper = new Fx.Tween (upperId, duration: 200, Übergang: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = neuer Fx.Tween (lowerId, duration: 200, Übergang: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("Sichtbarkeit", "ausgeblendet"); $ (UpperId) .setStyle ("Sichtbarkeit") , "versteckt");); flipLower.start ('height', 64);; flipUpper.start ('height', 0); // Ende der Flip-Funktion retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; wenn (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12; if( h != h_current) flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/'); h_current = h; if( m2 != m2_current) flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/'); m2_current = m2; flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/'); m1_current = m1; if (s2 != s2_current) flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/'); s2_current = s2; flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/'); s1_current = s1; //end retroClock setInterval('retroClock()', 1000); Wir sind fertig! Ich hoffe, es hat Ihnen Spaß gemacht, an diesem kleinen Projekt zu arbeiten, es hat ein etwas komplexes Konzept, aber am Ende ist es ein wirklich hübsches Gadget für Ihre Websites. Bitte zögern Sie nicht, Vorschläge zu senden!
