Ende letzten Jahres habe ich die Website für den Chrome Dev Summit erstellt. Ich wollte, dass die Website Material Design nutzt, da es eine großartige Designsprache ist und ich der Meinung war, dass sie gut zu der Art von Website passt, die ich erstellen wollte. Wie bei jeder neuen Designsprache gibt es jedoch Fragen, Herausforderungen und Entscheidungen, die zu treffen sind, insbesondere wenn es um die Konventionen des Webs geht.
Ein Aspekt der Website, der besonders schwierig zu erstellen war, ist der „Takeover“-Effekt, wenn Sie auf eine Karte klicken.
Um einen solchen Effekt mit 60 fps zu erzielen, waren einige Überlegungen, Prototypen und interessante Kompromisse erforderlich. Auf dem Chrome Dev Summit habe ich über diesen Effekt gesprochen und im Detail erklärt, wie ich ihn erstellt habe.
Leistungsstarke Animationen erstellen
Leistungsstarke Animationen sind zumindest heute solche, die den Compositor des Browsers bevorzugen. Wenn Sie nur die Eigenschaften „transform“ und „opacity“ ändern, erzielen Sie in der Regel eine gute Leistung. Der allgemeine Ansatz, den ich für die Kartenanimation gewählt habe, ist genau das:
- Messen Sie die Position aller Elemente auf der Karte, wenn sie minimiert ist.
- Sie können die Klassen der Karte umschalten, um sie zu maximieren (ohne Animation).
- Messen Sie die Position der Elemente auf der Karte neu, nachdem die Karte maximiert wurde.
- Berechnen Sie die Differenzen.
- Wenden Sie negative Transformationen an, um die Elemente an die Ausgangspositionen zurückzubewegen.
- Aktivieren Sie Animationen.
- Entfernen Sie die negativen Transformationen und beobachten Sie, wie die Elemente an ihre endgültigen Positionen auf dem Bildschirm flitzen.
Das klingt vielleicht teuer, aber es gibt ein Zeitfenster von 100 ms ab dem Moment, in dem ein Nutzer interagiert, bevor die Animation starten muss. Bei mehr als dieser Anzahl nimmt der Nutzer eine Verzögerung wahr. Sie können diese Zeit nutzen, um aufwendige Vorbereitungsarbeiten zu erledigen, damit die Animation selbst kostengünstiger ausgeführt werden kann. Am Ende gibt es auch ein Zeitfenster von etwa 50 bis 100 ms für Aufräumarbeiten, was je nach Aufgabe nützlich sein kann.
Die aufwendige Arbeit für die Animation wird innerhalb der ersten 100 ms erledigt. Auf einem Nexus 5 dauert sie etwa 70 ms. Es bleibt also noch etwas Spielraum.
Code abrufen
Wenn Sie sich die Website genauer ansehen möchten, können Sie sich den Code auf GitHub ansehen.