Ende letzten Jahres habe ich die Website Chrome Dev Summit erstellt. Ich wollte ein Material Design-Design haben, da es eine tolle Designsprache ist, und ich fand, dass es gut zu der Art von Website passen würde, die ich erstellen wollte. Aber wie bei jeder neuen Designsprache gibt es auch hier Fragen, Herausforderungen und Entscheidungen zu treffen, insbesondere wenn es um die Konventionen des Webs geht.
Ein Aspekt der Website, der besonders schwierig zu erstellen war, war der „Takeover“-Effekt beim Klicken auf eine Karte.
Damit ein Effekt wie dieser mit 60 fps laufen konnte, waren einige Nachdenken, Prototyping und einige interessante Kompromisse nötig. Ich habe auf dem Chrome Dev Summit über diesen Effekt gesprochen und ausführlich erklärt, wie ich bei der Entwicklung vorging.
Hochleistungsanimation erstellen
Bei leistungsstarken Animationen wird aktuell zumindest der Compositor des Browsers bevorzugt. Wenn Sie in der Lage sind, Änderungen an den Eigenschaften der Transformation und der Deckkraft vorzunehmen, werden Sie in der Regel eine sehr gute Leistung erzielen. Meine allgemeine Herangehensweise an die Kartenanimation sieht genau so aus:
- Messen Sie die Position aller Elemente auf der Karte, wenn die Karte minimiert ist.
- Sie können die Klassen der Karte ein-/ausblenden, um sie zu maximieren (ohne Animation).
- Messen Sie noch einmal die Position der Elemente auf der Karte, wenn 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, in dem der Nutzer mit der Interaktion beginnt, bevor die Animation beginnen muss. Wird mehr angegeben, nimmt der Nutzer eine Verzögerung wahr. Sie können diese Zeit für teure Vorarbeiten nutzen, damit Sie während der eigentlichen Animation kostengünstiger arbeiten können. Außerdem gibt es am Ende von etwa 50 bis 100 ms ein Fenster, in dem Aufräumarbeiten möglich ist, was praktisch sein kann, je nachdem, was Sie tun möchten.
Der teure Aufwand für die Animation wird innerhalb dieser ersten 100 ms erledigt. Auf einem Nexus 5 ist dieser Vorgang ungefähr 70 ms in Anspruch nehmen. Da bleibt noch Platz.
Code abrufen
Wenn Sie sich die Website im Detail ansehen möchten, freuen wir uns, dass der Code auf GitHub veröffentlicht wurde. Los gehts!