2015-09-18 4 views
10

In apple watch site: können Sie den Abschnitt weiter unten sehen, wenn Sie ein wenig nach unten scrollen:Wie wird die Leinwandanimation auf der Apple Watch-Website implementiert?

enter image description here

Die Uhr auf der linken Seite nicht ein statisches Bild, sondern eine attraktive Animation tatsächlich. Als ich das DOM-Element im Inspektor von Chrome zu sehen, finde ich es ein canvas Element ist:

enter image description here

Wenn ich die heruntergeladenen Dateien überprüfen, finde ich Bilder wie diese:

enter image description here

Das sieht für mich ziemlich kryptisch aus. Wie heißt die hier verwendete Technik Apfel, die aus überladenen Bildern Animationen auf Leinwand erzeugen kann? Gibt es Bibliotheken dafür?

+1

Für mich würde ich sagen, dass es sich möglicherweise um einen benutzerdefinierten Algorithmus handelt, den sie selbst erstellt haben, vielleicht um zu versuchen, Leute davon abzuhalten, die Animation herunterzuladen? (Könnte es einfach aufnehmen; p) – Canvas

+1

@Canvas :-) oder vielleicht will Apple den Datenverkehr speichern oder die Seite schneller laden .. –

Antwort

1

Scheint mir, als ob sie einen benutzerdefinierten Algorithmus verwenden, wobei jede Zeile des Bildes die Animation für die relative Linie der Zeichenfläche darstellt.

Aber um es zu bestätigen und/oder zu simulieren, sollten Sie den JavaScript-Quellcode lesen (wenn er nicht zu sehr verschleiert ist).

Verwandte Themen