Ende letzten Jahres habe ich die Website Chrome Dev Summit erstellt. Ich wollte, dass es ein Material Design-Erscheinungsbild hat, weil es eine tolle Designsprache ist, und ich dachte, dass es perfekt zu der Art von Website passt, die ich erstellen wollte. Aber wie bei jeder neuen Designsprache müssen auch hier Fragen gestellt, Herausforderungen und Entscheidungen getroffen werden, insbesondere im Hinblick auf die Konventionen des Webs.
Ein Aspekt der Website, der besonders schwierig zu erstellen war, war der „Takeover“-Effekt beim Klicken auf eine Karte.
Um einen solchen Effekt mit 60 fps zu erreichen, waren einige Nachdenken, Prototyping und einige interessante Kompromisse nötig. Ich habe beim Chrome Dev Summit über diesen Effekt gesprochen und ausführlich erklärt, wie ich bei der Entwicklung vorging.
Hochleistungsanimation erstellen
Bei Animationen mit hoher Leistung wird derzeit zumindest der Compositor des Browsers bevorzugt. Wenn Sie die Umwandlungs- und Deckkrafteigenschaften beibehalten können, erzielen Sie damit in der Regel eine sehr gute Leistung. Die allgemeine Herangehensweise an die Kartenanimation ermöglicht genau das:
- Messen Sie die Position aller Elemente auf der Karte, wenn die Karte minimiert ist.
- Sie können zwischen den Klassen der Karte wechseln, um sie zu maximieren (ohne Animation).
- Messen Sie die Position der Elemente auf der Karte noch einmal, sobald die Karte maximiert ist.
- Berechnen Sie die Unterschiede.
- Wenden Sie negative Transformationen an, um die Elemente zurück an ihre Startpositionen zu verschieben.
- Animationen aktivieren.
- Entfernen Sie die negativen Transformationen und beobachten Sie, wie die Elemente zu ihrer endgültigen Position auf dem Bildschirm fliegen.
All dies mag teuer klingen, aber es gibt ein Zeitfenster von 100 ms ab dem Moment, an dem ein Nutzer mit der Anzeige interagiert, bevor die Animation beginnen muss. Wird dieser Wert überschritten, nimmt der Nutzer eine Verzögerung wahr. Sie können diese Zeit für teure Vorbereitungsarbeiten nutzen, damit Sie während der Animation selbst kostengünstiger arbeiten können. Außerdem gibt es ein Fenster am Ende von etwa 50 bis 100 ms, in dem Sie Aufräumarbeiten erledigen können, was je nachdem, was Sie tun möchten, praktisch sein kann.
Die kostspielige Arbeit für die Animation wird innerhalb dieser ersten 100 ms erledigt. Auf einem Nexus 5 dauert dies etwa 70 ms, sodass noch Platz übrig bleibt.
Code abrufen
Wenn ihr euch die Website genauer ansehen möchtet, wird es gefreut, zu hören, dass der Code auf GitHub veröffentlicht wurde. Werft also einen Blick darauf!