Uhren - CSS-Animation

Um loszulegen wir einige HTML benötigen.

Mein erster Ansatz war für jeden der Hände drei Elemente zu verwenden. Ich ging dann zurück und wickelte die jeweils in einem Containerelement. Während die einfacheren HTML so weit wie die grundlegenden CSS-Animationen gearbeitet, werden wir Elemente enthalten müssen, wenn wir die Hände positionieren wollen und animieren sie auch.

Ziffernblatt

Wir beginnen mit einem Basistakt Entwurf, der ein rundes Gesicht, mit einfachen Stunden, Minuten und Sekundenzeiger hat.

Hier können Sie den SVG-Hintergrund erhalten. Ich habe auch ein Pseudo-Element hinzufügen, um einen festen schwarzen Kreis in die Mitte gegeben. Die Zeiger der Uhr können dann hinter diesem Pseudo-Elemente platziert werden je nach Bedarf.

Wir sollten jetzt etwas davon haben.

Bevor die Hände hinzufügen, müssen wir die Behälter platzieren.

Diese stapelt jeden Behälter auf der Oberseite der Uhr. Als Nächstes erstellen wir die Hände.

Jede Hand wird die Position Eigentum der absoluten gegeben und in der 12 Uhr Position gebracht. Wir werden mit dem Stundenzeiger beginnen.

Ich verwende Prozent Skalierung, die Uhren zu erleichtern. Es ist ein bisschen mehr Arbeit, aber macht es leichter haben sie die Ansicht passen oder für Handys schrumpfen. Wir setzen auch die transformationsUrsprungsEigenschaft auf der Unterseite der Hand, so dass es später gedreht werden kann.

Minutenzeiger

Eine stehengebliebene Uhr wird nur zweimal am Tag richtig sein. Lassen Sie uns einige Animationen hinzufügen, um die Uhr zu machen verhalten sich eher wie die reale Sache.

Einige Uhren springen zusammen mit jeder Sekunde, in der Regel ein tickendes Geräusch zu machen. Einige Uhren schnurren zusammen mit den Händen sanft bewegt. Wir werden beide versuchen. Zunächst werden wir die Hände leicht bewegen lassen.

Wir haben ein Keyframe verwenden können, die Hände zu sagen um 360 Grad zu bewegen (die 0% Ausgangsposition wird angedeutet).

Dieser Keyframe teilt das Element um 360 Grad zu animieren, an das Element angelegt, wenn die Animation Eigenschaft. Wir werden eine lineare Zeitfunktion auf der Hand verwenden, um die Hände leicht bewegen zu lassen.

Der Stundenzeiger wird alle 12 Stunden einmal dreht (43.200 Sekunden). Der Minutenzeiger dreht sich einmal pro Stunde, und der Sekundenzeiger einmal pro Minute.

Legen Sie es zusammen und wir haben jetzt Bewegung!

Wenn Sie sehr scharfsichtigen sind, können Sie in der Lage sein, auch die Minutenzeiger bewegen ausmachen. Es wäre eine Stunde dauern, bis sie eine Drehung zu vollenden, und 12 Stunden für die Stundenzeiger es der Schaltung zu vervollständigen.

Die zweite Hand dauert 60 Sekunden, so dass es leichter zu merken.

Hinzufügen von Schritten

Wir können die Hände mehr wie eine normale Uhr verhalten, indem sie in 60 separaten Bewegungen rund um die Uhr die zweite Hand bewegen zu müssen. Ein einfacher Weg, dies zu erreichen, wird unter Verwendung der Schritte Timing-Funktion. Die Animationseigenschaft für jede Hand wird dann:

Sowohl die Minuten- und Sekundenzeiger jetzt bewegen sich in sechzig Schritten. Der Browser berechnet automatisch, wie weit jeder dieser 60 Stufen bewegen.

Die richtige Zeit

Diese Funktion konvertiert die Zeit (Stunden, Minuten und Sekunden) in den entsprechenden Winkel für jede Hand. Es Schleifen dann durch jede Hand und wendet diesen Winkel die Eigenschaft style.transform rotateZ verwenden.

Dies wird auf den meisten Browsern funktionieren, außer Safari oder anderen Browsern ein Präfix zu benötigen. Um dies zu ermöglichen wir auch die style.webkitTransform Eigenschaft verwenden.

Diese stellt dann die Uhr auf die aktuelle Systemzeit.

Ausrichten von Sekunden- und Minutenzeigern

Wir müssen sicherstellen, dass der Minutenzeiger bewegt, wenn der Sekundenzeiger die 12 Uhr Position trifft.

Diese zusätzlichen Linien überprüfen, um zu sehen, ob die Hand ist die „Minuten“ Hand, und wenn ja, setzt ein Datenattribut mit dem aktuellen Winkel der Sekundenzeiger.

Mit diesem Datenattribut, dann können wir diese Daten verwenden, um herauszufinden, wenn der Minutenzeiger zu bewegen.

Hinzufügen Bounce

Diese Übergänge gelten für die transform-Eigenschaft und verwenden Sie die kubisch-Bezier-Timing-Funktion. Diese Timing-Funktion gibt den Händen etwas Bounce.

Browser-Kompatibilität

Moderne Browser können die CSS-Übergänge und Animationen beteiligt behandeln. IE10 +, aktuelle Chrome und Firefox sie ohne Präfixe unterstützen und Safari erfordert die -webkit Präfix.

Wenn Sie diesen Artikel genossen, teilen Sie es!

Möchten Sie mehr über CSS-Animation lernen?

Ein praktischer Video-Kurs die Theorie der CSS-Animation zu einem realen Projekt anwenden. Bauen Sie die ultimative Zielseite!

Melden Sie sich jetzt und Stufe nach oben Ihre CSS-Kenntnisse.

Demo

Ein praktischer Video-Kurs die Theorie der CSS-Animation zu einem realen Projekt anwenden. Bauen Sie das ultimative animierte Zielseite!