Digital Know How

Für ihren Fortschritt

Ein immer aktuelles Thema im Bereich der hybriden App-Entwicklung sind möglichst nativ-wirkende Seitenübergänge bzw. Animationen. Im Ionic-Framework wird das Problem mit CSS-Animationen angegangen, was bei sehr großen Views zu einem Performance-Flaschenhals werden kann. Der Übergang hängt, ist langsam oder ruckelt kurz und schwupp ist die neue View zu sehen.

Das Team rund um Telerik, ein Unternehmen das sich auf die Erstellung von Tools zur mobilen App-Entwicklung spezialisiert hat, hat das Problem mit einem kleinen Trick gelöst. Anstatt die wirklichen DOM-Elemente zu animieren, wird einfach ein Screenshot der aktuellen View erstellt und nur dieses bewegt. Ausgangspunkt der Entwicklung stellte das eigene Frontend-Framework KendoUI dar. Denn auch Telerik stand, wie viele andere vor dem Problem flüssige und möglichst native Animationen anzubieten.

Herausgekommen ist am Ende ein eigenständiges Cordova-Plugin, welches grundlegende Animationen anbietet, die der Entwickler bequem ansteuern und jederzeit ausführen kann.

Installation

Die Einrichtung ist denkbar einfach und erfolgt, wie bei jedem Cordova-Plugin über die Eingabe des Installationsbefehls in einer Kommandozeile.

cordova plugin add https://github.com/Telerik-Verified-Plugins/NativePageTransitions

Konfiguration

Ist das Plugin erfolgreich installiert, erhält der Entwickler über window.plugins.nativepagetransitions Zugriff auf dieses. Über den Schlüssel globalOptions können dann grundlegende Einstellungen vorgenommen werden, die natürlich später auch wieder von Fall zu Fall überschrieben werden können.

  • duration – setzt Dauer des Seitenübergangs (Standardwert: 400ms)
  • iosdelay – Verzögerung des Seitenübergangs auf iOS (Standardwert: 60ms)
  • androiddelay – Verzögerung des Seitenübergangs auf Android (Standardwert: 70ms)
  • winphonedelay – Verzögerung des Seitenübergangs auf Windows Phone (Standardwert: 200ms)
  • slowdownfactor – Überlagerung der Views (Standardwert: 4, Minimum 1 – keine Überlagerung)
  • fixedPixelsTop – Abstand des animierten Bereichs von Oben (Standardwert: 0 – iOS, Android)
  • fixedPixelsBottom – Abstand des animierten Bereichs von Unten (Standardwert: 0 – iOS, Android)

Ein Code-Beispiel dazu:

window.plugins.nativepagetransitions.globalOptions.duration = 500;
window.plugins.nativepagetransitions.globalOptions.iosdelay = 350;
window.plugins.nativepagetransitions.globalOptions.androiddelay = 350;
window.plugins.nativepagetransitions.globalOptions.winphonedelay = 350;
window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 4;
// Nur für Slide-Animationen auf iOS und Android
window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;

Animationen

Das Plugin stellt folgende Navigations-Animationen als Funktion auf dem Plugin-Objekt bereit.

  • slide – Eine View schiebt eine andere aus dem Viewport oder legt sich über diese
  • flip – Eine Drehanimation
  • fade – Eine View wird aus- und die neue eingeblendet

Jeder Animationsfunktion kann ein Konfigurationsobjekt übergeben werden, um die globalen Optionen temporär zu überschreiben. Zusätzlich kann bei manchen ein Parameter gesetzt werden, der die Animations-Richtung steuert.

  • slide – left|right|up|down (Standardwert: left)
  • flip – left|right|up|down (Standardwert: right, Android unterstützt nur right, left)

Zusätzlich kann einer Animation auch ein Erfolgs- und Fehler-Callback mitgegeben werden.
Ein Beispiel für eine Slide-Animation von rechts nach links.

window.plugins.nativepagetransitions.slide({
    "direction": "left",
    "duration":  500
  },
  function (msg) {
    console.log("ERFOLG: " + msg);
  }, // Animation ist fertig!
  function (msg) {
    console.log("FEHLER: " + msg);
  } // Fehler bei der Animation
);

 

Video: Telerik Native Page Transitions Plugin

Für die Usability spielt die Animationsrichtung in einer App eine sehr wichtige Rolle. Es sollte darauf geachtet werden, dass Seitenübergänge bei der Navigation zur vorherigen View immer von rechts nach links (Animations-Richtung right) und zu einer nächsten View andersherum von links nach rechts (Animations-Richtung left) erfolgen.

Implementatierung in eine Ionic-App

In einer AngularJS- bzw. Ionic-App lässt sich das Cordova-Plugin schnell und einfach integrieren. Dazu werden folgende Schritte durchgeführt.

  1. Installation des Plugins
  2. Globale Konfiguration im run-Block der Anwendung
  3. Deaktivieren der Ionic-Seitenübergänge im config-Block
  4. Generische Direktive zur Steuerung der Animation im Template
  5. Nutzung der Direktive im Template

Globale Konfiguration

Da die Installation des Plugins klar sein sollte, steigen wir direkt mit der Konfiguration im run-Block ein. Der run-Block einer AngularJS-App wird vor dem eigentlich Start der Anwendung ausgeführt. Es bietet sich daher an, in diesem Schritt alle nötigen Konfigurationen zu treffen, sobald Ionic und Cordova bereit sind. Eine mögliche Umsetzung könnte wie folgt aussehen.

meineApp.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins) {
      if (window.cordova.plugins.nativepagetransitions) {
        window.plugins.nativepagetransitions.globalOptions.duration = 350;
        window.plugins.nativepagetransitions.globalOptions.iosdelay = 200;
        window.plugins.nativepagetransitions.globalOptions.androiddelay = 200;
        window.plugins.nativepagetransitions.globalOptions.winphonedelay = 200;
        window.plugins.nativepagetransitions.globalOptions.slowdownfactor = 10;
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsTop = 0;
        window.plugins.nativepagetransitions.globalOptions.fixedPixelsBottom = 0;
      }
    }
  });
});

Deaktivieren der Standard-Seitenübergänge

Damit sich die nativen und die über Ionic gesteuerten Seitenübergänge nicht in die Quere kommen, werden die Ionic-Transitions im config-Block über den $ionicConfigProvider deaktiviert.

meineApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.transition('none');
});

Generische Direktive

Für eine Direktive können wir uns Komponenten des Ionic-Frameworks zur Hilfe nehmen, um beispielsweise auf einen Tap/Klick auf das Element zu lauschen und darauf zu reagieren. Dadurch kann automatisch auf das Betätigen des Zurück-Knopfes oder Anwählen eines Linkes reagiert werden. Als Optionen kann dann noch Animationsrichtung und -typ übergeben werden. Zum Schluss muss nur noch die angegebene Animations-Funktion mit der übergebenen Richtung aufgerufen werden.

meineApp.directive('nativeTransition', ['$ionicGesture', '$ionicPlatform', function($ionicGesture, $ionicPlatform) {
  return {
    restrict: 'A', // Direktive als Attribut verfügbar
    link: function(scope, element, attrs) {
      // Element wird angetapt
      $ionicGesture.on('tap', function(e) {
        // Animationsrichtung
        var direction = attrs.direction;
        // Animationstyp
        var transitiontype = attrs.transitiontype;
        // Das Gerät und Ionic sind bereit
        $ionicPlatform.ready(function() {
          switch (transitiontype) {
            case "slide":
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
            case "flip":
              window.plugins.nativepagetransitions.flip({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
            case "fade":
              window.plugins.nativepagetransitions.fade({

                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
              break;
            default:
              window.plugins.nativepagetransitions.slide({
                  "direction": direction
                },
                function(msg) {
                  console.log("success: " + msg)
                },
                function(msg) {
                  alert("error: " + msg)
                }
              );
          }
        });
      }, element);
    }
  };
}]);

Nutzung im Template

Die Nutzung im Template ist dann sehr einfach. Der Direktiven Name wird an das entsprechende Element geschrieben und die Optionen gesetzt. Als Beispiel wird dem ionNavBackButton die Direktive zugewiesen.

<ion-nav-bar class="bar-stable">
  <ion-nav-back-button transitiontype="slide" direction="right" native-transition>
  </ion-nav-back-button>
</ion-nav-bar>

Im folgenden GitHub-Repository befindet sich das Ionic-Tabs Starter-Template mit implementierten nativen Seitenübergängen:
Ionic-Starter-Tabs mit nativen Seitenübergängen

Für das ganze existiert bereits ein eigenes Node-Modul, um die Seitenübergänge in die eigene Ionic-App zu integrieren:
shprink/ionic-native-transitions

Hier kann sogar statt einer Verzögerung auf ein AngularJS-Event gehört werden (z.B. “$ionicView.afterEnter”), um möglichst zum richtig Zeitpunkt die Animation zu starten.

Wir freuen uns über eine Bewertung, um ein Feedback zu erhalten:

Durchschnittlich 4.8 Sterne aus 4 Meinungen.