Δημιουργήστε έναν κινούμενο ιστότοπο AngularJS

Αυτό το σεμινάριο δημοσιεύθηκε αρχικά το 2014. Ορισμένες λεπτομέρειες ενδέχεται να έχουν αλλάξει.

Γωνιακό JS γεννήθηκε από την ανάγκη εύρεσης καλύτερου τρόπου δημιουργίας εταιρικών εφαρμογών ιστού και πέτυχε με μεγάλη επιτυχία. Ωστόσο, για πολύ καιρό ένιωθα ότι υπήρχε μια τεράστια έκταση δυνατοτήτων που δεν είχε ξεφύγει από το AngularJS. Όλα αυτά άλλαξαν όταν η ομάδα AngularJS παρουσίασε το API animations στο AngularJS.

Τώρα μπορούμε να δημιουργήσουμε μια ελκυστική εμπειρία χρήστη μέσω κινούμενων σχεδίων. Για χάρη του χρόνου και του χώρου, θα επικεντρωθώ συγκεκριμένα στα τμήματα AngularJS και δεν θα σκάσω στη δομή HTML και CSS. Με αυτά τα λόγια, ενθαρρύνω όλους να κατεβάσουν το αποθετήριο και να εξερευνήσουν τα μέρη που δεν έχω σε αυτό το άρθρο.



Κατεβάστε τα αρχεία που θα χρειαστείτε για αυτό το σεμινάριο.

Θα ξεκινήσουμε με έναν απλό, στατικό ιστότοπο AngularJS και θα τον κινούμε χρησιμοποιώντας AngularJS και TweenMax από την πλατφόρμα Animation Greensock. Ο ιστότοπος έχει μια εικόνα φόντου πλήρους μεγέθους για κάθε σελίδα που ολισθαίνει από δεξιά προς τα αριστερά όταν επιλέγεται μια νέα σελίδα και ένα πλαίσιο περιεχομένου που ολισθαίνει από αριστερά προς τα δεξιά για να εμφανιστεί το περιεχόμενο για αυτήν τη σελίδα. Επισκεφτείτε το αποθετήριο GitHub εδώ και δείτε μια επίδειξη εδώ.

Ρυθμίστε τα αρχεία σας

Τα δύο κύρια αρχεία για αυτό το έργο είναι index.html και js / app.js , που χρησιμεύουν ως σημείο εκκίνησης. Ξεκινώντας με αυτά τα αρχεία, θα προσθέσουμε τον απαραίτητο κώδικα για την κίνηση του φόντου και του πλαισίου περιεχομένου που αλλάζει στα αριστερά. Για αναφορά, index.finish.html και js / app.finish.js περιέχει τον ολοκληρωμένο κώδικα για τα κινούμενα σχέδια.

Υποθέτω μια βασική γνώση του AngularJS αλλά παρακαλώ ανατρέξτε στην τεκμηρίωση αν έχετε απορίες σχετικά με ένα συγκεκριμένο κομμάτι του κώδικα AngularJS.

Προσθέστε τη λειτουργικότητά σας

Η υποκείμενη δομή δεδομένων για τον ιστότοπο πρόκειται να είναι σελίδες, οπότε εδώ μπορείτε να ορίσετε αυτές στην 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; }; })

Εμφανίζουμε τις ιδιότητες των αντικειμένων της σελίδας μας στο HTML μας

καλύτερη οθόνη για γραφιστική 2018
Εμφανίζουμε τις ιδιότητες των αντικειμένων της σελίδας μας στο HTML μας

Στον ελεγκτή μας, ορίζουμε ένα σελίδες αντικείμενο εύρος $ , που πρόκειται να καθορίσει το περιεχόμενό μας για τον ιστότοπο. Αυτός είναι ουσιαστικά ένας χάρτης κλειδιού-τιμής που θα χρησιμοποιήσουμε για τη λήψη και τη ρύθμιση της τρέχουσας σελίδας, καθώς και για την εμφάνιση του περιεχομένου στο HTML. Παρακολουθούμε την τρέχουσα σελίδα στην οποία βρισκόμαστε $ lingkup.currentPage και αρχικά το έβαλε σε Σπίτι .

Ρυθμίζουμε επίσης ένα σελίδα ακίνητο εύρος $ για να διατηρήσουμε το πραγματικό περιεχόμενο της σελίδας στην οποία βρισκόμαστε. Ορίζουμε επίσης μια λειτουργία ευκολίας $ lingkup.isCurrentPage που επιστρέφει αληθής ή ψευδής με βάση την τιμή της παραμέτρου σελίδας και του σελίδα είμαστε επί του παρόντος.

Ενεργοποίηση κινούμενων σχεδίων

Αντί στον πυρήνα, οι κινούμενες εικόνες στο AngularJS περιλαμβάνονται ως ξεχωριστό αρχείο JavaScript που ονομάζεται angular-animate.min.js , έτσι ώστε η ngAnimate η ενότητα είναι διαθέσιμη στην εφαρμογή μας. Λάβετε υπόψη ότι χρησιμοποιούμε το AngularJS 1.2-RC.3 (ή την επίσημη έκδοση 1.2). Τώρα που έχουμε προσθέσει το αρχείο προέλευσης για ngAnimate , πρέπει να το εισάγουμε στην ενότητα του ιστότοπού μας αλλάζοντας angular.module ('ιστότοπος', ['']) προς την angular.module ('ιστότοπος', ['ngAnimate']) .

Προσθέστε κινούμενες εικόνες

Τεχνικά, ξεκινάμε με έναν πλήρως λειτουργικό ιστότοπο, αλλά τα πράγματα είναι λίγο υποτιμητικά αυτή τη στιγμή. Τώρα που έχουμε ενεργοποιήσει κινούμενες εικόνες, ήρθε η ώρα να αντιστρέψουμε την βαρετή και να προσθέσουμε μερικές κινούμενες εικόνες. Πριν αρχίσουμε να κινούμε τις εικόνες φόντου και μετά να κινούμε τον πίνακα περιεχομένου.

πώς φωτογραφίζετε κάποιον σε μια εικόνα

Τα κινούμενα σχέδια JavaScript στο AngularJS δημιουργούνται καλώντας το module.animation () εργοστασιακή μέθοδο με το όνομα της κινούμενης εικόνας που θέλετε να δημιουργήσετε και μια συνάρτηση που θα καθορίσει τη συμπεριφορά της κινούμενης εικόνας.

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

Το συμβόλαιο ονομασίας AngularJS βασίζεται στην κατηγορία CSS. Γι 'αυτό ονομάσαμε το animation μας .bg κινούμενα σχέδια και οχι bg-κινούμενα σχέδια . Τα κινούμενα σχέδια AngularJS είναι στην πραγματικότητα ένα σύνολο αγκιστριών συμβάντων που χρησιμοποιούνται για να μεταβιβαστούν σε ό, τι πραγματικά χρησιμοποιείτε για να κάνετε τις κινούμενες εικόνες σας, είτε πρόκειται για μεταβάσεις CSS, κινούμενες εικόνες βασικού καρέ CSS ή κινούμενες εικόνες JavaScript. Αναθέτοντας το πραγματικό τμήμα κινούμενης εικόνας, το AngularJS σας δίνει ατελείωτες ευκαιρίες να χειριστείτε τις κινούμενες εικόνες, όπως κρίνετε κατάλληλες, είτε είναι με το χέρι είτε χρησιμοποιώντας βιβλιοθήκη τρίτων.

Στην περίπτωσή μας, ακούμε για το εισαγω και άδεια συμβάν που ενεργοποιείται όταν ng-εάν προσθέτει ή αφαιρεί ένα στοιχείο στο DOM. Και οι δύο χειριστές εκδηλώσεων παίρνουν στοιχείο επίσης Έγινε παράμετρος. ο στοιχείο Η παράμετρος είναι το στοιχείο στο οποίο ενεργοποιήθηκε το συμβάν κίνησης και το Έγινε Η παράμετρος είναι μια επανάκληση που πρέπει να κληθεί όταν ολοκληρωθεί η κινούμενη εικόνα, ώστε το AngularJS να γνωρίζει ότι μπορεί να προχωρήσει με ασφάλεια.

Εάν επιστρέψετε μια συνάρτηση μέσα στην κινούμενη εικόνα, τότε αυτή η λειτουργία θα ενεργοποιηθεί όταν ολοκληρωθεί η κινούμενη εικόνα ή όταν ακυρωθεί. Αυτό είναι προαιρετικό. Ωστόσο, αποδεικνύεται χρήσιμο εάν πρέπει να καθαρίσετε τυχόν ιδιότητες που σχετίζονται με κινούμενα σχέδια στο στοιχείο μετά το κλείσιμο της κινούμενης εικόνας. Τώρα που έχουμε τη βασική δομή και για τα δύο συμβάντα κινουμένων σχεδίων, ήρθε η ώρα να προσθέσουμε τα πραγματικά κινούμενα σχέδια.

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

Όταν προστίθεται μια εικόνα φόντου στο DOM, θέλουμε να ξεκινά από την άκρη δεξιά του παραθύρου και να μετακινείται προς τα αριστερά.

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

Το επιτυγχάνουμε με TweenMax.fromTo και λέγοντάς του να κινείται το στοιχείο για 0,5 δευτερόλεπτα. Στην αρχή της κινούμενης εικόνας, η αριστερή ιδιότητα στυλ έχει οριστεί σε $ window.innerWidth εικονοστοιχεία και το ίδιο το κινούμενο σχέδιο αριστερά ιδιοκτησία προς 0 εικονοστοιχεία. Ανακοίνωση στο προς την αντικείμενο animation που ορίζουμε ένα onComplete χειριστής συμβάντων και ρυθμίστε το σε Έγινε .

Αξίζει επίσης να αναφερθεί προτού προχωρήσουμε περαιτέρω ότι χρησιμοποιούμε το παράθυρο $ υπηρεσία, η οποία είναι βασικά ένα περιτύλιγμα AngularJS γύρω από το εγγενές αντικείμενο παραθύρου. Αυτή η υπηρεσία δεν επεκτείνεται ή τυλίγεται με οποιονδήποτε τρόπο, έτσι παράθυρο $ Η υπηρεσία λειτουργεί όπως το κανονικό στοιχείο παραθύρου.

Η κινούμενη εικόνα για την αφαίρεση μιας εικόνας φόντου από το DOM είναι ελαφρώς απλούστερη.

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

Επειδή η στοιχείο είναι ήδη στη θέση του, μπορούμε να ξεφύγουμε απλώς χρησιμοποιώντας TweenMax.to και ρύθμιση του αριστερά ιδιοκτησία σε αρνητικό $ window.innerWidth . Αυτό θα κάνει την εικόνα να γλιστρήσει από την οθόνη προς τα αριστερά. Και τώρα που έχουμε το δικό μας .bg κινούμενα σχέδια καθορισμένο, πώς το συνδέουμε πραγματικά έτσι ώστε να λειτουργεί; Θυμηθείτε ότι τα κινούμενα σχέδια ακολουθούν μια σύμβαση ονοματολογίας που βασίζεται στην κλάση CSS. Ακολουθούν οι εικόνες φόντου χωρίς το κινούμενο σχέδιο.

Και εδώ είναι οι εικόνες φόντου με ενεργοποιημένη την κινούμενη εικόνα.

ya

Και αυτό είναι! Πρέπει απλώς να προσθέσετε το κινούμενο σχέδιο στο στοιχείο σας σαν να ήταν τάξη CSS. Αυτό αρχίζει να μοιάζει πολύ με μια οδηγία που βασίζεται στην τάξη, έτσι δεν είναι; Πραγματικά ισχυρά πράγματα!

Μέγεθος σωστών εικόνων

Μπορεί να έχετε παρατηρήσει το βγ χαρακτηριστικό στις εικόνες φόντου μας. Αυτό το χαρακτηριστικό αντιπροσωπεύει μια οδηγία που έγραψα για να κάνω σωστά το μέγεθος των εικόνων στο πλήρες πλάτος και το ύψος της οθόνης. Το έκανα αυτό μετατρέποντας την καταπληκτική προσθήκη jQuery.fullBG από @bavotasan . Μπορείτε να δείτε την οδηγία στα αρχεία προέλευσης και να διαβάσετε σχετικά με την αρχική προσθήκη εδώ .

έκανε το kit kat ποτέ μια παύλα

Ο πίνακας περιεχομένου ολισθαίνει από τα αριστερά ενώ η εικόνα φόντου ολισθαίνει από τα δεξιά

Ο πίνακας περιεχομένου ολισθαίνει από τα αριστερά ενώ η εικόνα φόντου ολισθαίνει από τα δεξιά

Ζώστε τον πίνακα περιεχομένου

Έχουμε σχεδόν τελειώσει με τον ιστότοπό μας. Το μόνο κομμάτι που λείπει είναι η κίνηση του πίνακα περιεχομένου. Θα το χειριστούμε λίγο διαφορετικά, αλλάζοντας το δεσμευτικό της ορατότητας ng-απόκρυψη σε μια ιδιοκτησία που ονομάζεται είναι τοInTransit επί εύρος $ .

Ορίζουμε είναι τοInTransit επί εύρος $ και μετά να το ρυθμίσετε ψευδής αφού θέλουμε ο πίνακας περιεχομένου να είναι ορατός αρχικά.

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

Ρυθμίζουμε είναι τοInTransit προς την αληθής όταν έχει οριστεί μια νέα σελίδα που θα κάνει τον πίνακα περιεχομένου να κρυφτεί. Ρυθμίζουμε επίσης είναι τοInTransit προς την ψευδής όταν ο bgTransitionComplete ενεργοποιείται το συμβάν. Σημειώστε αυτό το συμβάν γιατί θα φτάσουμε εκεί που θα απολυθεί σε λίγο.

Τώρα αυτό είναι τοInTransit έχει οριστεί και έχουμε έναν τρόπο να το ρυθμίσουμε αληθής ή ψευδής , ήρθε η ώρα να το συνδέσετε στο HTML.

Στον προηγούμενο κώδικα, αλλάζουμε την ορατότητα του πίνακα περιεχομένου με βάση την τιμή του είναι τοInTransit με τον κωδικό ng-hide = 'isInTransit' . Προσθέσαμε επίσης την τάξη panel-animation , το οποίο πρόκειται να ορίσουμε ως ένα AngularJS animation στη συνέχεια.

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

Η υποκείμενη λειτουργικότητα του ng-απόκρυψη Η οδηγία επιτυγχάνεται προσθέτοντας και αφαιρώντας μια κλάση που ονομάζεται ng-απόκρυψη , το οποίο εξηγεί γιατί είναι τα γεγονότα για αυτό το κινούμενο σχέδιο addClass και removeClass . Σε αυτήν την περίπτωση θέλουμε να κάνουμε κινούμενα σχέδια μόνο εάν η τάξη που προστίθεται ή καταργείται ng-απόκρυψη , γι 'αυτό ελέγχουμε το όνομα τάξης παράμετρος.

Εάν το όνομα τάξης είναι ng-απόκρυψη , τότε θα εκτελέσουμε την κινούμενη εικόνα και, αν όχι, τότε απλά καλούμε το Έγινε επιστροφή κλήσης (που ουσιαστικά παραλείπει την κίνηση). Και τώρα που η δομή είναι στη θέση της, ήρθε η ώρα να προσθέσετε τα κινούμενα σχέδια TweenMax.

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

Πότε ng-απόκρυψη προστίθεται, θέλουμε να κινούμε τον πίνακα περιεχομένου εκτός σκηνής.

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

Θα το κάνουμε αυτό με τη ρύθμιση αδιαφάνεια προς την 0 κατά τη διάρκεια 0,2 δευτερολέπτων. Και πότε ng-απόκρυψη έχει αφαιρεθεί, θα σύρετε το πλαίσιο περιεχομένου από τα αριστερά και θα το ξεθωριάσουμε ξανά.

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

Θα χρησιμοποιήσουμε TweenMax.fromTo για να ξεκινήσετε με (το πλαίσιο στα αριστερά της οθόνης) και ένα αδιαφάνεια του 0 με το από αντικείμενο {αδιαφάνεια: 0, αριστερά: -στοιχείο. πλάτος ()} . Στη συνέχεια θα το ξεθωριάσουμε ρυθμίζοντας αδιαφάνεια προς την 0,8 ή 80% και αριστερά προς την 0 .

πώς να φτιάξετε πλέγματα σε ανεξάρτητο σχεδιασμό

Επειδή δεν μπορούμε να ρυθμίσουμε !σπουδαίος μέσω προγραμματισμού με JavaScript, απλώς καταργούμε το ng-απόκρυψη τάξη χειροκίνητα με element.removeClass («nghide») . Αυτή είναι μόνο η ατυχής πραγματικότητα που κάνει κινούμενα σχέδια με αυτόν τον τρόπο, αλλά είναι μόνο ένα μικρό στεφάνι για να περάσετε.

Θυμηθείτε όταν είπα να κάνω μια σημείωση του bgTransitionComplete συμβάν που ακούγαμε στον ελεγκτή; Λοιπόν, ως έχει, έχουμε έναν τρόπο να ρυθμίσουμε είναι τοInTransit προς την αληθής που θα κρύψει το πλαίσιο περιεχομένου, αλλά δεν το ρυθμίζουμε ψευδής για να επαναφέρετε τον πίνακα περιεχομένου.

Θέλουμε να περάσει ο πίνακας περιεχομένου μετά την ολοκλήρωση της κινούμενης εικόνας της εικόνας φόντου, οπότε εδώ θα ενεργοποιήσουμε αυτό το συμβάν. Έτσι, για παράδειγμα, δείτε τον ακόλουθο κώδικα:

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

Το πρώτο πράγμα που πρέπει να κάνουμε είναι η ένεση $ rootScope σε .bg κινούμενα σχέδια , ώστε να μπορούμε να το χρησιμοποιήσουμε για τη μετάδοση εκδηλώσεων. Τότε θα καθορίσουμε μια πραγματική συνάρτηση που θα κληθεί όταν onComplete πυρκαγιές. Σε αυτόν τον χειριστή λειτουργίας θα βάλουμε αυτό το κομμάτι κώδικα.

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

Επειδή η onComplete Η επανάκληση πραγματοποιείται ως μέρος μιας λειτουργίας TweenMax, πρέπει να ενημερώσουμε την AngularJS ότι έχει συμβεί κάτι που πρέπει να γνωρίζει. Γι 'αυτό καλούμε $ rootScope. $ ισχύει και καλώντας $ rootScope. $ broadcast ('bgTransitionComplete') ; στο κλείσιμο. Και τελευταίο αλλά όχι λιγότερο σημαντικό, καλούμε Έγινε() για να ολοκληρώσετε την κινούμενη εικόνα και να επιστρέψετε τον έλεγχο στο AngularJS.

συμπέρασμα

Έχουμε έναν πλήρως λειτουργικό ιστότοπο που βασίζεται στα AngularJS και Greensock! Το πιο εντυπωσιακό για μένα είναι ότι μόλις τεθεί σε λειτουργία η λειτουργία, η ρύθμιση των κινούμενων σχεδίων είναι αρκετά εύκολη. Συνιστώ να ελέγξετε το Έτος Moo blog από τον Matias Niemelä. έγραψε ngAnimate , έτσι είναι πολύ ικανό να μιλήσει για αυτό, και έχει παράσχει ορισμένους πόρους για να μάθετε πώς να χρησιμοποιείτε το νέο API.

Αυτό το άρθρο δημοσιεύτηκε αρχικά στο καθαρό περιοδικό τεύχος 249.

Σχετικά Άρθρα: