Pod koniec ubiegłego roku stworzyłem stronę Chrome Dev Summit. Chciałem, żeby wyglądała i działała zgodnie z zasadami Material Design, ponieważ to świetny język projektowania, który moim zdaniem idealnie pasuje do rodzaju witryny, jaką chciałem stworzyć. Jak w przypadku każdego nowego języka projektowania, pojawiają się pytania, wyzwania i decyzje do podjęcia, zwłaszcza w odniesieniu do konwencji internetowych.
Szczególnie trudne do stworzenia było „przejęcie” strony po kliknięciu karty.
Uzyskanie takiego efektu przy 60 klatkach na sekundę wymagało przemyślenia, prototypowania i kilku ciekawych kompromisów. Na konferencji Chrome Dev Summit opowiedziałem o tym efekcie i szczegółowo wyjaśniłem, jak go stworzyłem.
Tworzenie animacji o wysokiej wydajności
Animacje o wysokiej wydajności to obecnie te, które są korzystne dla kompozytora przeglądarki. Jeśli będziesz zmieniać tylko właściwości przekształcenia i przezroczystości, zwykle uzyskasz świetne wyniki. Ogólne podejście do animacji karty polega na tym, że:
- Mierzy pozycję wszystkich elementów na karcie, gdy jest ona zwinięta.
- Przełącz klasy karty, aby ją rozwinąć (bez animacji).
- Ponownie zmierz pozycję elementów na karcie po jej rozwinięciu.
- Oblicz różnice.
- Zastosuj przekształcenia ujemne, aby przenieść elementy z powrotem do pozycji początkowych.
- Włącz animacje.
- Usuń negatywne przekształcenia i obserwuj, jak elementy przemieszczają się na ekranie do swoich ostatecznych lokalizacji.
To wszystko może wydawać się kosztowne, ale od momentu interakcji użytkownika do rozpoczęcia animacji jest 100 ms. Jeśli będzie ich więcej, użytkownik zauważy opóźnienie. Możesz wykorzystać ten czas na wykonanie kosztownych prac przygotowawczych, aby w trakcie samej animacji ponosić mniejsze koszty. Na końcu jest też okno o długości około 50–100 ms, w którym można wykonać czynności porządkowe. Może się to przydać w zależności od tego, co chcesz zrobić.
Kosztowna praca związana z animacją jest wykonywana w ciągu pierwszych 100 ms, a na Nexusie 5 zajmuje około 70 ms, więc jest jeszcze trochę miejsca.
Pobierz kod
Jeśli chcesz przyjrzeć się tej stronie bliżej, z pewnością ucieszy Cię fakt, że kod został opublikowany na GitHubie.