Erstellen Sie eine animierte AngularJS-Website

Dieses Tutorial wurde ursprünglich im Jahr 2014 veröffentlicht. Einige Details haben sich möglicherweise geändert.

AngularJS wurde aus der Notwendigkeit heraus geboren, einen besseren Weg zum Erstellen von Webanwendungen für Unternehmen zu finden, und es ist auf großartige Weise gelungen. Lange Zeit hatte ich jedoch das Gefühl, dass es eine Vielzahl von Möglichkeiten gab, in die AngularJS sich nicht gewagt hatte. Das änderte sich, als das AngularJS-Team die Animations-API in AngularJS einführte.

Jetzt können wir durch Animationen eine ansprechende Benutzererfahrung schaffen. Aus Zeit- und Raumgründen werde ich mich speziell auf die AngularJS-Teile konzentrieren und mich nicht mit der HTML- und CSS-Struktur befassen. Vor diesem Hintergrund ermutige ich alle, das Repository herunterzuladen und die Teile zu untersuchen, auf die ich in diesem Artikel nicht eingehen möchte.



Herunterladen die Dateien, die Sie benötigen für dieses Tutorial.

Wir beginnen mit einer einfachen, statischen AngularJS-Website und animieren sie mit AngularJS und TweenMax von der Greensock Animation Platform. Die Site verfügt über ein Hintergrundbild in voller Größe für jede Seite, die bei Auswahl einer neuen Seite von rechts nach links verschoben wird, und ein Inhaltsfenster, das von links nach rechts verschoben wird, um den Inhalt für diese Seite anzuzeigen. Besuchen Sie das GitHub-Repository Hier und sehen Sie sich eine Demo an Hier.

Richten Sie Ihre Dateien ein

Die beiden wichtigsten Dateien für dieses Projekt sind index.html und js / app.js. , die als Ausgangspunkt dienen. Beginnend mit diesen Dateien fügen wir den Code hinzu, der zum Animieren des sich ändernden Hintergrund- und Inhaltsbereichs auf der linken Seite erforderlich ist. Als Referenz, index.finish.html und js / app.finish.js enthalten den vollständigen Code für die Animationen.

Ich gehe von Grundkenntnissen in AngularJS aus, aber bitte Siehe Dokumentation Wenn Sie Fragen zu einem bestimmten AngularJS-Code haben.

Fügen Sie Ihre Funktionalität hinzu

Die zugrunde liegende Datenstruktur für die Website werden Seiten sein. So definieren Sie diese in unserem JavaScript:

.controller('MainCtrl', function ($scope) { $scope.pages = { 'home': { label: 'Home', sublabel: 'Sublabel', content: 'This is page content.' }, 'about': { label: 'About', sublabel: 'Sublabel', content: 'This is page content.' }, 'contact': { label: 'Contact', sublabel: 'Sublabel', content: 'This is page content.' } }; $scope.currentPage = 'home'; $scope.page = $scope.pages['home']; $scope.isCurrentPage = function (page) { return $scope.currentPage === page; }; })

Wir zeigen die Eigenschaften der Objekte unserer Seite in unserem HTML an

Wir zeigen die Eigenschaften der Objekte unserer Seite in unserem HTML an

In unserem Controller definieren wir a Seiten Objekt auf $ scope , die unseren Inhalt für die Website definieren wird. Dies ist im Wesentlichen eine Schlüsselwertzuordnung, mit der wir die aktuelle Seite abrufen und festlegen sowie den Inhalt im HTML-Code anzeigen. Wir verfolgen die aktuelle Seite, auf der wir uns befinden, indem wir sie definieren $ scope.currentPage und zunächst auf einstellen Zuhause .

beste Laptops für Adobe Creative Suite

Wir setzen auch eine Seite Eigentum auf $ scope um den tatsächlichen Inhalt der Seite zu speichern, auf der wir uns befinden. Wir definieren auch eine Komfortfunktion $ scope.isCurrentPage das kehrt zurück wahr oder falsch basierend auf dem Wert des Seitenparameters und des Seite Wir sind gerade auf.

Animationen aktivieren

Animationen in AngularJS werden nicht im Kern, sondern als separate JavaScript-Datei namens aufgerufen angle-animate.min.js , so, dass die ngAnimate Modul steht unserer Anwendung zur Verfügung. Beachten Sie, dass wir AngularJS 1.2-RC.3 (oder die offizielle Version 1.2) verwenden. Nachdem wir die Quelldatei für hinzugefügt haben ngAnimate müssen wir es durch Ändern in unser Website-Modul einfügen angle.module ('website', ['']) zu angle.module ('website', ['ngAnimate']) .

Fügen Sie Animationen hinzu

Technisch gesehen beginnen wir mit einer voll funktionsfähigen Website, aber die Dinge sind im Moment etwas überwältigend. Nachdem wir Animationen aktiviert haben, ist es an der Zeit, das Blatt gegen die Langeweile zu wenden und einige Animationen hinzuzufügen. Wir werden zuerst die Hintergrundbilder und danach das Inhaltsfenster animieren.

JavaScript-Animationen in AngularJS werden durch Aufrufen von erstellt module.animation () Factory-Methode mit dem Namen der Animation, die Sie erstellen möchten, und einer Funktion, die das Verhalten der Animation definiert.

myModule.animation('.bg-animation', function ($window) { return { enter: function (element, done) { someAnimation(element, done); return function(cancelled) { //this function is called when the animation is done } }, leave: function (element, done) { } }; })

Die Namenskonvention für AngularJS-Animationen basiert auf CSS-Klassen. Deshalb haben wir unsere Animation benannt .bg Animation und nicht bg-animation . AngularJS-Animationen sind eine Reihe von Ereignis-Hooks, mit denen Sie an alles delegieren können, was Sie tatsächlich für Ihre Animationen verwenden, egal ob es sich um CSS-Übergänge, CSS-Keyframe-Animationen oder JavaScript-Animationen handelt. Durch die Delegierung des eigentlichen Animationsteils bietet AngularJS endlose Möglichkeiten, die Animationen nach Belieben von Hand oder mithilfe einer Bibliothek eines Drittanbieters zu verarbeiten.

In unserem Fall hören wir auf die eingeben und verlassen Ereignis, das ausgelöst wird, wenn ng-if Fügt dem DOM ein Element hinzu oder entfernt es. Beide Event-Handler nehmen eine Element auch a getan Parameter. Das Element Parameter ist das Element, für das das Animationsereignis ausgelöst wurde, und das getan Parameter ist ein Rückruf, der aufgerufen werden muss, wenn die Animation abgeschlossen ist, damit AngularJS weiß, dass es sicher weitergehen kann.

Wenn Sie eine Funktion innerhalb der Animation zurückgeben, wird diese Funktion ausgelöst, wenn die Animation abgeschlossen ist oder wenn sie abgebrochen wird. Dies ist optional. Es erweist sich jedoch als nützlich, wenn Sie nach dem Schließen der Animation alle animationsbezogenen Eigenschaften des Elements bereinigen müssen. Nachdem wir die Grundstruktur für beide Animationsereignisse eingerichtet haben, ist es Zeit, die eigentlichen Animationen hinzuzufügen.

.animation('.bg-animation', function ($window) { return { enter: function (element, done) { TweenMax.fromTo(element, 0.5, { left: $window.innerWidth}, {left: 0, onComplete: done}); }, leave: function (element, done) { TweenMax.to(element, 0.5, {left: -$window.innerWidth, onComplete: done}); } }; })

Wenn dem DOM ein Hintergrundbild hinzugefügt wird, soll es ganz rechts im Fenster beginnen und ganz nach links verschoben werden.

TweenMax.fromTo(element, 0.5, { left: $window.innerWidth}, {left: 0, onComplete: done});

Dies erreichen wir mit TweenMax.fromTo und indem man es sagt, um das zu animieren Element für 0,5 Sekunden. Zu Beginn der Animation wird die linke Stileigenschaft auf gesetzt $ window.innerWidth Pixel und die Animation selbst werden das animieren links Eigentum an 0 Pixel. Hinweis in der zu Animationsobjekt definieren wir ein onComplete Event-Handler und setzen Sie es auf getan .

Es ist auch erwähnenswert, bevor wir weiter gehen, dass wir das verwenden $ window Service, bei dem es sich im Grunde um einen AngularJS-Wrapper um das native Fensterobjekt handelt. Dieser Service wird in keiner Weise erweitert oder verpackt $ window Service verhält sich wie das reguläre Fensterelement.

Die Animation für das Entfernen eines Hintergrundbilds aus dem DOM ist etwas einfacher.

TweenMax.to(element, 0.5, {left: -$window.innerWidth, onComplete: done});

Weil die Element ist bereits vorhanden, können wir durch einfaches Verwenden davonkommen TweenMax.to und Einstellen der links Eigentum zu einem negativen $ window.innerWidth . Dadurch wird das Bild vom Bildschirm nach links verschoben. Und jetzt, wo wir unsere haben .bg Animation definiert, wie schließen wir es tatsächlich an, damit es funktioniert? Denken Sie daran, dass Animationen einer CSS-klassenbasierten Namenskonvention folgen. Hier sind die Hintergrundbilder ohne Animation.

Und hier sind die Hintergrundbilder mit aktivierter Animation.

ya

Und das ist alles! Sie müssen die Animation einfach zu Ihrem Element hinzufügen, als wäre es eine CSS-Klasse. Das fängt an, einer klassenbasierten Direktive sehr ähnlich zu sein, nicht wahr? Wirklich mächtiges Zeug!

Größe der Bilder richtig

Möglicherweise haben Sie das bemerkt bg Attribut auf unseren Hintergrundbildern. Dieses Attribut stellt eine Anweisung dar, die ich geschrieben habe, um die Größe der Bilder auf die volle Breite und Höhe des Bildschirms zu bringen. Ich habe dies getan, indem ich das fantastische jQuery.fullBG-Plugin von konvertiert habe @ Bayotasan . Sie können die Direktive in den Quelldateien überprüfen und sich über das Original-Plugin informieren Hier .

Das Inhaltsfenster wird von links eingeblendet, während das Hintergrundbild von rechts eingeblendet wird

Das Inhaltsfenster wird von links eingeblendet, während das Hintergrundbild von rechts eingeblendet wird

Animieren Sie das Inhaltsfenster

Wir sind fast fertig mit unserer Website. Das einzige fehlende Teil ist das Animieren des Inhaltsbereichs. Wir werden dies etwas anders behandeln, indem wir die Sichtbarkeitsbindung umschalten ng-hide zu einer Eigenschaft namens isInTransit auf $ scope .

Wir definieren isInTransit auf $ scope und dann einstellen auf falsch da wir möchten, dass das Inhaltsfenster zunächst sichtbar ist.

.controller('MainCtrl', function ($scope) { // Code omitted $scope.isInTransit = false; $scope.setCurrentPage = function (page) { if ($scope.currentPage !== page) { $scope.page = $scope.pages[page]; $scope.currentPage = page; $scope.isInTransit = true; } }; $scope.$on('bgTransitionComplete', function(){ $scope.isInTransit = false; }); })

Wir setzen isInTransit zu wahr Wenn eine neue Seite erstellt wird, wird das Inhaltsfenster ausgeblendet. Wir setzen auch isInTransit zu falsch wenn die bgTransitionComplete Ereignis wird ausgelöst. Machen Sie sich eine mentale Notiz über dieses Ereignis, denn wir werden in einem Moment dort ankommen, wo es abgefeuert wird.

Nun das isInTransit ist definiert und wir haben eine Möglichkeit, es einzustellen wahr oder falsch Es ist Zeit, es mit dem HTML zu verbinden.

Im vorherigen Code schalten wir die Sichtbarkeit des Inhaltsbereichs basierend auf dem Wert von um isInTransit mit dem Code ng-hide = 'isInTransit' . Wir haben auch die Klasse hinzugefügt Panel-Animation , die wir als nächstes als AngularJS-Animation definieren werden.

.animation('.panel-animation', function () { return { addClass: function (element, className, done) { if (className == 'ng-hide') { } else { done(); } }, removeClass: function (element, className, done) { if (className == 'ng-hide') { } else { done(); } } }; });

Die zugrunde liegende Funktionalität der ng-hide Die Anweisung wird durch Hinzufügen und Entfernen einer aufgerufenen Klasse erreicht ng-hide , was erklärt, warum die Ereignisse für diese Animation sind addClass und removeClass . In diesem Fall möchten wir eine Animation nur ausführen, wenn die hinzugefügte oder entfernte Klasse ist ng-hide Deshalb überprüfen wir die Klassenname Parameter.

Wenn die Klassenname ist ng-hide , dann führen wir die Animation durch und wenn nicht, rufen wir einfach die auf getan Rückruf (der im Grunde die Animation überspringt). Und jetzt, da die Struktur vorhanden ist, ist es Zeit, die TweenMax-Animationen hinzuzufügen.

.animation('.panel-animation', function () { return { addClass: function (element, className, done) { if (className == 'ng-hide') { TweenMax.to(element, 0.2, { opacity: 0, onComplete: done }); } else { done(); } }, removeClass: function (element, className, done) { if (className == 'ng-hide') { element.removeClass('ng-hide'); TweenMax.fromTo(element, 0.5, { opacity: 0, left: -element.width() }, { opacity: 0.8, left: 0, onComplete: done }); } else { done(); } } }; })

Wann ng-hide hinzugefügt wird, möchten wir das Inhaltsfenster von der Bühne animieren.

TweenMax.to(element, 0.2, { opacity: 0, onComplete: done });

Wir werden dies tun, indem wir einstellen Opazität zu 0 im Laufe von 0,2 Sekunden. Und wann ng-hide entfernt wird, schieben wir das Inhaltsfenster von links hinein und blenden es wieder ein.

element.removeClass('ng-hide'); TweenMax.fromTo(element, 0.5, { opacity: 0, left: -element.width() }, { opacity: 0.8, left: 0, onComplete: done });

Wir werden verwenden TweenMax.fromTo zu Beginn (das Feld links auf dem Bildschirm) und ein Opazität von 0 mit dem von Objekt {Deckkraft: 0, links: -Element. Breite() } . Wir werden es dann durch Einstellen einblenden Opazität zu 0,8 oder 80% und links zu 0 .

Weil wir nicht setzen können !wichtig programmgesteuert mit JavaScript entfernen wir einfach die ng-hide Klasse manuell mit element.removeClass ('nghide') . Dies ist nur die unglückliche Realität, Animationen auf diese Weise zu erstellen, aber es ist nur ein kleiner Reifen, durch den man springen kann.

Denken Sie daran, als ich sagte, ich solle mir das notieren bgTransitionComplete Ereignis, auf das wir im Controller gehört haben? Nun, so wie es aussieht, haben wir einen Weg zu setzen isInTransit zu wahr Dadurch wird das Inhaltsfenster ausgeblendet, aber wir setzen es nicht auf falsch um das Inhaltsfenster zurückzubringen.

Verwendung des Farbersetzungswerkzeugs in Photoshop

Wir möchten, dass das Inhaltsfenster nach Abschluss der Animation des Hintergrundbilds eingeblendet wird, damit wir dieses Ereignis auslösen können. Siehe zum Beispiel folgenden Code:

.animation('.bg-animation', function ($window, $rootScope) { return { enter: function (element, done) { TweenMax.fromTo(element, 0.5, { left: $window.innerWidth}, {left: 0, onComplete: function () { $rootScope.$apply(function(){ $rootScope.$broadcast('bgTransitionComplete'); }); done(); }}); }, // Code omitted }; })

Das erste, was wir tun müssen, ist zu injizieren $ rootScope in .bg Animation , damit wir damit Ereignisse übertragen können. Dann definieren wir eine tatsächliche Funktion, die wann aufgerufen werden soll onComplete Feuer. In diesen Funktionshandler werden wir diesen Code einfügen.

$rootScope.$apply(function(){ $rootScope.$broadcast('bgTransitionComplete'); }); done();

Weil die onComplete Rückruf geschieht als Teil einer TweenMax-Operation. Wir müssen AngularJS darüber informieren, dass etwas passiert ist, über das es Bescheid wissen muss. Deshalb rufen wir an $ rootScope. $ anwenden und anrufen $ rootScope. $ Broadcast ('bgTransitionComplete') ;; in der Schließung. Und zu guter Letzt rufen wir an getan() um die Animation zu beenden und AngularJS die Kontrolle zurückzugeben.

Fazit

Wir haben eine voll funktionsfähige Website, die auf AngularJS und Greensock basiert! Das Beeindruckendste für mich ist, dass das Einrichten der Animationen ziemlich einfach ist, sobald die Funktionalität vorhanden ist. Ich empfehle das Auschecken Jahr des Moo Blog von Matias Niemelä. Er schrieb ngAnimate ist daher sehr qualifiziert, darüber zu sprechen, und hat einige Ressourcen zum Erlernen der Verwendung der neuen API bereitgestellt.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 249.

Zum Thema passende Artikel: