Animacja między widokami

Dowiedz się, jak animować przejście między 2 widokami w aplikacjach.

Paul Lewis

Często konieczne jest przenoszenie użytkowników między widokami w aplikacji – na przykład z listy do widoku szczegółów lub do wyświetlania paska nawigacyjnego na pasku bocznym. Animacje między tymi widokami pomagają utrzymać zaangażowanie użytkownika i dodają jeszcze więcej życia projektom.

• Używaj tłumaczeń do przełączania się między widokami. Unikaj używania elementów left, top i innych elementów, które wywołują układ.
• Upewnij się, że animacje są dynamiczne, a ich czas trwania jest krótki.
• Zastanów się, jak animacje i układy zmieniają się wraz ze wzrostem rozmiaru ekranu. To, co sprawdza się na mniejszym ekranie, może wyglądać dziwnie na komputerze.

Sposób działania i wygląd tych przejść zależy od typu widoku. Na przykład animowanie nakładki modalnej u góry widoku powinno być czymś innym niż przełączanie się między widokiem listy a widokiem szczegółów.

Udane: staraj się, aby wszystkie animacje miały 60 FPS. Dzięki temu użytkownicy nie będą widzieć zacięć animacji, które zakłócają korzystanie z aplikacji. Upewnij się, że dowolny element animowany ma ustawiony parametr will-change dla wszystkiego, co planujesz zmienić na długo przed rozpoczęciem animacji. W przypadku przejść między widokami najprawdopodobniej użyjesz will-change: transform.

Przechodzenie między widokami za pomocą tłumaczeń

Aby ułatwić sobie życie, załóżmy, że są 2 widoki: widok listy i widok szczegółów. Gdy użytkownik kliknie element listy w widoku listy, pojawi się widok szczegółów, a widok listy wysunie się na zewnątrz.

Aby uzyskać taki efekt, musisz utworzyć kontener dla obu widoków z ustawionym parametrem overflow: hidden. Dzięki temu 2 widoki mogą być wyświetlane obok siebie w kontenerze bez poziomych pasków przewijania, a każdy widok może się przesuwać w poziomie w kontenerze w miarę potrzeby.

CSS kontenera:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

Pozycja kontenera jest ustawiona jako relative. Oznacza to, że każdy widok wewnątrz może być umieszczony w lewym górnym rogu, a następnie przenoszony za pomocą transformacji. Takie podejście zapewnia większą skuteczność niż korzystanie z właściwości left (ponieważ powoduje to wywołanie układu i malowania), a często jest też łatwiejsze do uzasadnienia.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Dodanie właściwości transition do właściwości transform powoduje płynne przejście. Aby zapewnić płynne działanie, używa ona niestandardowej krzywej cubic-bezier, o której była mowa w przewodniku po niestandardowych łagodnych przejściach.

.view {
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

Widok, który jest poza ekranem, powinien zostać przesunięty w prawo, więc w tym przypadku widok szczegółów musi zostać przesunięty:

.details-view {
  transform: translateX(100%);
}

Teraz do obsługi klas wystarczy wpisać niewielką część kodu JavaScript. W ten sposób przełączasz odpowiednie klasy widoków.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
    * Toggles the class on the container so that
    * we choose the correct view.
    */
function onViewChange(evt) {
    container.classList.toggle('view-change');
}

// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
    listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);

Na koniec dodajemy deklaracje CSS dla tych klas.

.view-change .list-view {
  transform: translateX(-100%);
}

.view-change .details-view {
  transform: translateX(0);
}

Wypróbuj

Możesz rozszerzyć ten widok na wiele widoków, a podstawowa koncepcja powinna pozostać taka sama. Każdy niewidoczny widok powinien zostać usunięty z ekranu i w razie potrzeby włączony, a obecny widok na ekranie należy usunąć.

Uwaga: tworzenie takiej hierarchii w różnych przeglądarkach może być trudne. Na przykład iOS wymaga dodatkowej właściwości CSS -webkit-overflow-scrolling: touch, aby „ponownie włączyć” przewijanie gestu, ale nie można określić, do której osi ma ono służyć, tak jak w przypadku standardowej właściwości overflow. Przetestuj swoją implementację na różnych urządzeniach.

Oprócz przechodzenia między widokami tę technikę można stosować również do innych elementów wsuwanych, np. elementów nawigacji w pasku bocznym. Jedyną prawdziwą różnicą jest to, że nie musisz przenosić innych widoków.

Upewnij się, że animacja działa na większych ekranach

W przypadku większego ekranu nie należy usuwać widoku listy, lecz pozostawić go na ekranie, a następnie przesunąć widok szczegółów z prawej strony. Jest to prawie to samo co praca z widokiem nawigacji.