Animiranje AngularJS aplikacija s ngAnimateom

Ovaj će vam blog objasniti kako koristiti popularni ngAnimate za dodavanje prijelaza / animacija stranice u kutne poglede, tj. Kako stvoriti animaciju pomoću ngAnimate

AngularJS je superherojski JavaScript okvir koji olakšava stvaranje aplikacija s jednom stranicom (SPA). Povrh toga, AngularJS dolazi s pregršt kutnih modula koji se mogu koristiti za stvaranje izvrsnog korisničkog iskustva. U ovom ćemo postu vidjeti kako koristiti popularni ngAnimate za dodavanje prijelaza / animacija stranice u kutne poglede.

ngAnimate se može koristiti s raznim direktivama poput ngRepeat, ngView, ngInclude, ngIf, ngMessage itd.





U ovom postu koristit ćemo animacije s ngViewom

Ovdje koristimo Bracket IDE tvrtke Adobe, ali slobodno možete koristiti i druge, na primjer, Sublime Text, WebStorm iz JetBrains itd.



Bilješka : Također ćemo koristiti Bootswatch Bootstrap API kako bismo našim HTML stranicama dali lijep izgled

Struktura projekta:

Ispod je struktura projekta u zagradama IDE



ngAnimate-angularjs-project-structure

Evo kratkog opisa svake datoteke koja se koristi u projektu

animacija.css - glavna CSS datoteka u kojoj definiramo animacije naše stranice

bootstrap.min.css Bootstrap za davanje naših označava prekrasan izgled

config.js - glavna JavaScript datoteka u kojoj definiramo naš kutni modul zajedno s rutama i kontrolerima

shellPage.html - Ovo je stranica ljuske u kojoj će se ostali pogledi dinamički učitavati

razvrstati niz c ++

view1.html, view2.html, view3.html - Ovo su djelomični prikazi koji će se učitati u shellPage

Kako se primjenjuju animacije:

ngAnimate primjenjuje CSS klase na različite Angular direktive, ovisno o tome ulaze li ili izlaze iz prikaza

.ng-enter - Ova CSS klasa primjenjuje se na direktivu kad god se učita na stranici

.ng-dopust - Ova CSS klasa primjenjuje se na direktivu kad god napusti stranicu

Prođimo svaku datoteku jednu po jednu

shellPage.html

shellPage učitava potrebne resurse, primjenjuje ng-app na tijelo i dodaje ng-view za dinamičko ubrizgavanje pogleda.

  

config.js

U konfiguracijskoj datoteci definiramo naš kutni modul zajedno s rutama i kontrolerima.

Modul prijelazApp ima dvije ovisnosti: ngAnimate i ngRoute

var prijelazApp = angular.module ('prelazApp', ['ngAnimate', 'ngRoute']) prelazApp.config (funkcija ($ routeProvider) {$ routeProvider .when ('/', {templateUrl: 'partials / view1.html' , kontroler: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', kontroler: 'view2Controller'}) .when ('/ view3', {templateUrl: 'partials / view3. html ', kontroler:' view3Controller '})}) prelazApp.controller (' view1Controller ', funkcija ($ opseg) {$ scope.cssClass =' ​​view1 '}) prelazApp.controller (' view2Controller ', funkcija ($ opseg) { $ scope.cssClass = 'view2'}) prijelazApp.controller ('view3Controller', funkcija ($ opseg) {$ scope.cssClass = 'view3'})

Definirali smo tri djelomična prikaza (pogled1, pogled2, pogled3) koji će se ubrizgati u školjku, ovisno o URL-u. Odgovarajući kontrolori postavljaju cssClass atribut, koji je naziv CSS klase, koji će se primijeniti na ng-pogled. Naše ćemo animacije definirati u ovim CSS razredima koji će svaku stranicu učitati različitim animacijama.

Djelomične stranice view1.html, view2.html, view3.html

Na djelomičnim stranicama nema ništa posebno, samo neki tekst i poveznica na druge poglede

pogled1.html

Ovo je Pogled 1

Pogled 2 Pogled 3

view2.html

Ovo je Pogled 2

Pogled 1 Pogled 3

view3.html

Ovo je Pogled 3

Pogled 1 Pogled 2

Imajte na umu da su ove tri HTML datoteke djelomične stranice koje će se ubrizgati u shellPage.html prema URL-u koji smo definirali u datoteci config.js

Utvrđivanje stilova i animacija:

Primijenimo CSS na svoje stavove

.view {dno: 0 padding-top: 200px pozicija: apsolutno poravnanje teksta: center top: 0 width: 100%} .view a {margin-top: 50px} .view h1 {font-size: 60px} #heading { boja: # 333 pozicija: apsolutno poravnanje teksta: središnji vrh: 50px širina: 100%} / * Boje pozadine i teksta za stranice s djelomičnim prikazom (pogled1, pogled2, pogled3) ------------- ------------------------------------------------ * / .view1 {background: # bef2de color: # 00907c} .view2 {background: # D4D0EA color: # 55316f} .view3 {background: # FFCBA4 color: rgba (149, 95, 40, 0.91)}

Da bismo izvršili čisti prijelaz između različitih pogleda, postavićemo svojstvo CSS z-index

.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}

Sada je vrijeme da definiramo naše animacije

Klizajte lijevo

/ * pomaknite se lijevo * / @keyframes slideOutLeft {za {transformiranje: translateX (-100%)}} @ -moz-keyframes slideOutLeft {za {-moz-transform: translateX (-100%)}} @ -webkit-keyframes slideOutLeft {do {-webkit-transform: translateX (-100%)}}

Povećaj animaciju

/ * povećaj * / @keyframes scaleUp {od {neprozirnost: 0,3 transformacija: skala (0,8)}} @ -moz-keyframes scaleUp {od {neprozirnost: 0,3 -moz-transformacija: skala (0,8)}} @ -webkit- ključni okviri scaleUp {od {opacity: 0,3 -webkit-transform: scale (0.8)}}

Kliznite s desne animacije

/ * klizajte zdesna * / @keyframes slideInRight {od {transform: translateX (100%)} do {transform: translateX (0)}} @ -moz-keyframes slideInRight {od {-moz-transform: translateX (100 %)} u {-moz-transform: translateX (0)}} @ -webkit-keyframes slideInRight {iz {-webkit-transform: translateX (100%)} u {-webkit-transform: translateX (0)}}

Slide In from Bottom Animation

/ * kliznite od dna * / @keyframes slideInUp {od {transform: translateY (100%)} do {transform: translateY (0)}} @ -moz-keyframes slideInUp {od {-moz-transform: translateY (100 %)} u {-moz-transform: translateY (0)}} @ -webkit-keyframes slideInUp {iz {-webkit-transform: translateY (100%)} u {-webkit-transform: translateY (0)}}

Okreni i pada Animacija

/ * zakretanje i pad * / @ -webkit-keyframes rotateFall {0% {-webkit-transform: rotateZ (0deg)} 20% {-webkit-transform: rotateZ (10deg) -webkit-animation-timing-function: easy- out} 40% {-webkit-transform: rotateZ (17deg)} 60% {-webkit-transform: rotateZ (16deg)} 100% {-webkit-transform: translateY (100%) rotateZ (17deg)}} @ -moz -keyframes rotateFall {0% {-moz-transform: rotateZ (0deg)} 20% {-moz-transform: rotateZ (10deg) -moz-animation-timing-function: easy-out} 40% {-moz-transform: rotateZ (17deg)} 60% {-moz-transform: rotateZ (16deg)} 100% {-moz-transform: translateY (100%) rotateZ (17deg)}} @keyframes rotateFall {0% {transform: rotateZ (0deg) } 20% {transform: rotateZ (10deg) animacija-timing-function: easy-out} 40% {transform: rotateZ (17deg)} 60% {transform: rotateZ (16deg)} 100% {transform: translateY (100%) rotirajZ (17deg)}}

Rotirajte novinsku animaciju

/ * rotiranje novina * / @ -webkit-keyframes rotateOutNewspaper {to {-webkit-transform: translateZ (-3000px) rotateZ (360deg) opacity: 0}} @ -moz-keyframes rotateOutNewspaper {to {-moz-transform: translateZ (-3000px) rotateZ (360deg) neprozirnost: 0}} @keyframes rotateOutNewspaper {to {transform: translateZ (-3000px) rotateZ (360deg) prozirnost: 0}}

Primjena animacija:

Vrijeme je da primijenimo animacije koje smo prije definirali

Pogledajte 1 animaciju

/ * Pogledajte 1 animaciju za napuštanje stranice i unesite * / .view1.ng-leave {-webkit-animation: slideOutLeft 0,5s, obje jednostavnosti-u -moz-animaciji: slideOutLeft 0,5s, obje animacije jednostavnosti: slideOutLeft 0,5s -in} .view1.ng-enter {-webkit-animacija: scaleUp 0,5s oboje-u -moz-animacija: scaleUp 0,5s i jednostavan animacija: scaleUp 0,5s i jednostavan}

Pogledajte 2 animacije

/ * Pogledajte 2 animacije za napuštanje stranice i unesite * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit-animacija: rotateFall 1s i jednostavan-u-moz-transform-origin: 0% 0% -moz-animacija: rotateFall 1s i jednostavan pretvorbeni izvor: 0% 0% animacija: rotateFall 1s i jednostavan} .view2.ng-enter {-webkit-animacija: slideInRight 0.5s, jednostavan - moz-animacija: slideInRight 0,5s, obje animacije jednostavnosti: slideInRight 0,5s, obje jednostavnosti}

Pogledajte 3 animacije

/ * Pogledajte 3 animacije za napuštanje stranice i unesite * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit-animacija: rotateOutNewspaper .5s i easy-in -moz-transform-origin: 50 % 50% -moz-animacija: rotateOutNewspaper .5s i jednostavan pretvarajući izvor: 50% 50% animacija: rotateOutNewspaper .5s i jednostavan} .view3.ng-enter {-webkit-animation: slideInUp 0.5s obje lakoće -in -moz-animacija: slideInUp 0,5s, i animacija jednostavnosti: slideInUp 0,5s, i easy-in}

Završili smo sa svim promjenama. Sada je vrijeme za pokretanje aplikacije

Pokretanje aplikacije

Pri pokretanju aplikacije prikazat će vam se donja stranica:

Kliknite na poveznice i vidjet ćete animacije u igri, pri ulasku i napuštanju djelomičnih stranica.

Postoje razne druge animacije koje se mogu koristiti. Također, ovdje može biti i ogroman skup mogućih učinaka: http://tympanus.net/Development/PageTransitions/

Preuzmite kod i isprobajte sami

[buttonleads form_title = ”Preuzmi kod” redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196 course_id = 283 button_text = ”Preuzmi kod”]

Nadam se da vam se svidjela gornja Animacija s ngAnimate blogom. Ako želite duboko zaroniti u Angular JS, preporučio bih vam zašto ne biste pogledali naš stranica tečaja. Obuka za Angular JS certificiranje u Edureki učinit će vas stručnjakom za Angular JS kroz sesije pod vodstvom instruktora uživo i praktični trening koji koristi slučajeve stvarne upotrebe.

Imate pitanje za nas? Molimo spomenite to u odjeljku za komentare i javit ćemo vam se.

Vezane objave:

Raščlanjivanje XML datoteka pomoću SAX Parsera