Pod koniec zeszłego roku stworzyłem witrynę Chrome Dev Summit. Zależało mi na tym, by był zgodny z Material Design, ponieważ jest świetnym językiem projektowania i uznałem, że idealnie będzie pasować do witryny, którą chciałam tworzyć. Jednak, tak jak w przypadku każdego nowego języka projektowania, trzeba podjąć pewne pytania, wyzwania i podejmować decyzje, zwłaszcza w odniesieniu do konwencji używanych w internecie.
Jednym z najtrudniejszych do utworzenia aspektów witryny był efekt „przejęcia” strony po kliknięciu karty.
Uzyskanie takiego efektu w przypadku 60 kl./s wymagało trochę myślenia, opracowania prototypu i kilku interesujących kompromisów. Na konferencji Chrome Dev Summit przedstawiłam ten efekt i szczegółowo wyjaśniłam, w jaki sposób go stworzyłem.
Tworzenie animacji o wysokiej wydajności
Obecnie animacje o wysokiej wydajności preferują kompozytor przeglądarki. Jeśli uda Ci się zmienić właściwości przekształcenia i przezroczystości, zwykle będziesz w stanie uzyskać bardzo dobre wyniki. Ogólne podejście do animacji karty właśnie to robi:
- Mierz położenie wszystkich elementów na karcie, gdy jest ona zwinięta.
- Możesz przełączać klasy karty, aby ją rozwinąć (bez animacji).
- Gdy karta jest rozwinięta, ponownie zmierz położenie elementów na karcie.
- Oblicz różnice.
- Zastosuj przekształcenia wykluczające, by przenieść elementy z powrotem na pozycje początkowe.
- Włącz animacje.
- Usuń negatywne przekształcenia i obserwuj, jak elementy przemieszczają się do swoich końcowych miejsc na ekranie.
Wszystko to może wydawać się drogie, ale od momentu interakcji użytkownika przed rozpoczęciem animacji obowiązuje okres 100 ms. Jeśli przekroczy to wartość, użytkownik zauważy opóźnienie. Możesz go wykorzystać na czasochłonne przygotowania, dzięki którym w trakcie trwania animacji będziesz taniej o to urządzenie. Po ok. 50-100 ms jest na to okno, które może być przydatne w zależności od tego, co chcesz zrobić.
Animacje są kosztowne w czasie pierwszych 100 ms, a na Nexusie 5 można to zrobić w 70 ms, więc nie ma tu miejsca na zbędne rzeczy.
Pobierz kod
Jeśli chcesz zapoznać się z tą stroną, ucieszy Cię fakt, że kod został opublikowany na GitHubie – zapraszamy do zapoznania się z nim.