Pod koniec zeszłego roku stworzyłem witrynę Chrome Dev Summit. Chciałam, żeby był zgodny z Material Design, ponieważ jest świetnym językiem projektowania i uznałem, że będzie idealnie pasować do witryny, którą chciałam tworzyć. Jednak, podobnie jak w przypadku każdego nowego języka projektowania, trzeba podjąć pewne pytania, wyzwania i decyzje, szczególnie jeśli chodzi o konwencje obowiązujące w internecie.
Jednym z najtrudniejszych do utworzenia aspektów witryny był efekt „przejęcia” po kliknięciu karty.
Uzyskanie takiego efektu przy 60 kl./s wymagało refleksji, opracowania prototypu i kilku ciekawych kompromisów. Podczas konferencji Chrome Dev Summit mówiłam o tym efektie i szczegółowo wyjaśniłam, w jaki sposób zamierzam go utworzyć.
Tworzenie animacji o wysokiej wydajności
Animacje o wysokiej wydajności obecnie to te, które faworyzują kompozytor przeglądarki. Jeśli będziesz w stanie trzymać się zmian właściwości przekształcenia i przezroczystości, zazwyczaj będziesz uzyskiwać dużą skuteczność. Ogólne podejście do animacji karty właśnie to robi:
- Zmierz położenie wszystkich elementów na karcie, gdy jest ona zwinięta.
- Przełącz 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 przesuwają się do swoich końcowych lokalizacji 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 przekroczysz tę wartość, użytkownik odnotuje opóźnienie. Możesz go wykorzystać na czasochłonne przygotowania, dzięki którym tańsze działanie będzie możliwe podczas trwania animacji. Dodatkowo po ok. 50-100 ms jest czas na porządkowanie, co może być przydatne w zależności od tego, co robisz.
Animacje są bardzo kosztowne w czasie pierwszych 100 ms, a na Nexusie 5 trzeba poświęcić około 70 ms, więc jest dość miejsca.
Pobierz kod
Jeśli chcesz zapoznać się z tą stroną bardziej szczegółowo, z przyjemnością dowiesz się, że kod został udostępniony na GitHubie – zapraszamy do zapoznania się z nim.