Animationen zwischen Ansichten

Hier erfahren Sie, wie Sie in Apps zwischen zwei Ansichten animieren.

Paul Lewis

Häufig möchten Sie Nutzer zwischen Ansichten in Ihrer Anwendung verschieben, z. B. von einer Liste zu einer Detailansicht oder einer Seitenleistennavigation. Animationen zwischen diesen Ansichten sorgen dafür, dass die Nutzenden interessiert sind und Ihre Projekte noch lebendiger werden.

• Verwenden Sie Übersetzungen, um zwischen Ansichten zu wechseln. Vermeiden Sie die Verwendung von left, top oder anderen Eigenschaften, die das Layout auslösen.
• Achten Sie darauf, dass alle verwendeten Animationen schnell und kurz sind.
• Überlegen Sie, wie sich Ihre Animationen und Layouts mit zunehmender Bildschirmgröße ändern. Was auf einem kleineren Bildschirm funktioniert, kann in einem Desktop-Kontext seltsam aussehen.

Wie diese Ansichtsübergänge aussehen und funktionieren, hängt von der Art der Ansichten ab, mit denen Sie es zu tun haben. Das Animieren eines modalen Overlays über einer Ansicht sollte sich beispielsweise vom Wechsel zwischen Listen- und Detailansicht unterscheiden.

Erfolg :Versuchen Sie, für alle Animationen eine Framerate von 60 fps beizubehalten. So vermeiden Sie ruckelige Animationen, die die Nutzererfahrung beeinträchtigen. Für jedes animierende Element muss will-change festgelegt sein, wenn Sie vor Beginn der Animation Änderungen vornehmen möchten. Für Übergänge bei Aufrufen empfehlen wir höchstwahrscheinlich will-change: transform.

Mit Übersetzungen zwischen Ansichten wechseln

Nehmen wir zur Vereinfachung an, es gibt zwei Ansichten: eine Listenansicht und eine Detailansicht. Wenn der Nutzer in der Listenansicht auf einen Listeneintrag tippt, öffnet sich die Detailansicht und die Listenansicht verschwindet wieder.

Um diesen Effekt zu erzielen, benötigen Sie für beide Ansichten einen Container, für den overflow: hidden festgelegt ist. So können die beiden Ansichten nebeneinander innerhalb des Containers angezeigt werden, ohne dass horizontale Bildlaufleisten angezeigt werden. Außerdem können die Ansichten innerhalb des Containers nach Bedarf von einer Seite auf die andere verschoben werden.

Der CSS-Code für den Container lautet:

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

Als Position des Containers ist relative festgelegt. Das bedeutet, dass jede darin enthaltene Ansicht absolut in der oberen linken Ecke positioniert und dann mit Transformationen verschoben werden kann. Dieser Ansatz eignet sich besser für die Leistung als die Eigenschaft left, da dadurch Layout und Painting ausgelöst wird. Außerdem ist die Methode in der Regel einfacher zu rationalisieren.

.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;
}

Wenn Sie der Eigenschaft transform ein transition hinzufügen, erhalten Sie einen schönen Folieneffekt. Für ein angenehmes Tragegefühl wird eine benutzerdefinierte cubic-bezier-Kurve verwendet, die wir im Leitfaden für benutzerdefiniertes Easing erläutert haben.

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

Die nicht sichtbare Ansicht sollte nach rechts verschoben werden, sodass in diesem Fall die Detailansicht verschoben werden muss:

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

Jetzt ist ein wenig JavaScript erforderlich, um die Klassen zu verarbeiten. Dadurch wird zwischen den entsprechenden Klassen in den Ansichten gewechselt.

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);

Schließlich fügen wir die CSS-Deklarationen für diese Klassen hinzu.

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

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

Ausprobieren

Sie könnten diese erweitern, um mehrere Ansichten abzudecken, und das Grundkonzept sollte gleich bleiben: Jede nicht sichtbare Ansicht sollte außerhalb des sichtbaren Bildschirmbereichs sein und nach Bedarf eingeblendet werden, und die aktuelle Ansicht sollte entfernt werden.

Achtung :Eine solche Hierarchie über mehrere Browser hinweg zu erstellen, kann eine Herausforderung sein. Für iOS ist beispielsweise die zusätzliche CSS-Eigenschaft -webkit-overflow-scrolling: touch erforderlich, um das flüchtige Scrollen wieder zu aktivieren. Sie können jedoch nicht steuern, für welche Achse sie verwendet werden soll, wie dies bei der standardmäßigen Überlaufeigenschaft möglich ist. Testen Sie Ihre Implementierung unbedingt auf einer Reihe von Geräten.

Diese Technik kann nicht nur zwischen Ansichten wechseln, sondern auch auf andere eingeschobene Elemente angewendet werden, z. B. auf Navigationselemente in der Seitenleiste. Der einzige tatsächliche Unterschied besteht darin, dass die anderen Ansichten in der Regel nicht verschoben werden müssen.

Animation für größere Bildschirme optimieren

Bei einem größeren Bildschirm sollten Sie die Listenansicht rund um die Uhr beibehalten, anstatt sie zu entfernen, und über die Detailansicht von rechts streichen. Dies funktioniert im Prinzip mit einer Navigationsansicht.