Ehitage animeeritud AngularJS veebisait

See õpetus avaldati algselt 2014. aastal. Mõned üksikasjad võivad olla muutunud.

NurgaJS sündis vajadusest leida parem viis ettevõtte veebirakenduste loomiseks ja see on õnnestunud suurejooneliselt. Kuid pikka aega tundsin, et on tohutult palju võimalusi, millesse AngularJS ei oleks julgenud minna. See kõik muutus, kui AngularJS-i meeskond tutvustas AngularJS-is animatsioonide API-d.

Nüüd saame animatsioonide abil luua kaasahaarava kasutajakogemuse. Aja ja ruumi huvides keskendun konkreetselt AngularJS-i osadele ega süvene HTML-i ja CSS-i struktuuri. Seda öeldes soovitan kõigil hoidla alla laadida ja uurida osi, millesse ma käesolevas artiklis ei puutu.

Lae alla vajalikud failid selle õpetuse jaoks.

Alustame lihtsa, staatilise AngularJS veebisaidiga ja animeerime selle, kasutades AngularJS-i ja TweenMaxi Greensocki animatsiooniplatvormilt. Saidil on iga lehe jaoks täissuuruses taustpilt, mis libiseb uue lehe valimisel paremalt vasakule, ja sisupaneel, mis libiseb vasakult paremale, et kuvada selle lehe sisu. Külastage GitHubi hoidlat siin ja vaadake demot siin.

Seadistage oma failid

Selle projekti kaks peamist faili on index.html ja js / app.js , mis on lähtepunktiks. Alustades nendest failidest, lisame vasakul asuva muutuva tausta ja sisu paneeli animeerimiseks vajaliku koodi. Viide index.finish.html ja js / app.finish.js sisaldab animatsioonide lõpetatud koodi.

Ma eeldan AngularJS-i põhiteadmisi, kuid palun vaadake dokumentatsiooni kui teil on küsimusi konkreetse AngularJS-koodi kohta.

Lisage oma funktsionaalsus

Veebisaidi aluseks olevaks andmestruktuuriks on lehed, nii et meie JavaScripti need saab defineerida järgmiselt:

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

Kuvame HTML-is oma lehe objektide atribuudid

Kuvame HTML-is oma lehe objektide atribuudid

Meie kontrolleris määratleme a lehekülgi objekt sisse ulatus $ , mis määratleb meie saidi sisu. See on sisuliselt võtmeväärtuste kaart, mida kasutame nii praeguse lehe hankimiseks ja seadistamiseks kui ka sisu kuvamiseks HTML-is. Jälgime praegust lehte, kus oleme, määratluse abil $ scope.currentPage ja esialgu selle seadistanud Kodu .

Paneme paika ka a lehele vara peal ulatus $ meie lehe tegeliku sisu hoidmiseks. Samuti määratleme mugavuse funktsiooni $ scope.isCurrentPage mis naaseb tõsi või vale põhineb lehe parameetri ja lehele oleme praegu peal.

Luba animatsioonid

Selle tuuma asemel on AngularJS-i animatsioonid lisatud eraldi JavaScripti failina, mida nimetatakse nurk-animate.min.js , nii et ngElusta moodul on meie rakendusele saadaval. Pidage meeles, et kasutame AngularJS 1.2-RC.3 (või ametlikku 1.2 versiooni). Nüüd, kui oleme lisanud lähtefaili domeenile ngElusta , peame selle muutmise abil oma veebisaidi moodulisse sisestama nurgeline moodul ('veebisait', ['']) kuni nurgeline moodul ('veebisait', ['ngAnimate']) .

Lisage animatsioone

Tehniliselt alustame täielikult toimivast veebisaidist, kuid praegu on asjad veidi alla jõuavad. Nüüd, kui oleme animatsioonid lubanud, on aeg pöörata tõus igavuse vastu ja lisada mõned animatsioonid. Animeerime kõigepealt taustapildid ja seejärel animeerime pärast seda sisupaneeli.

AngularJS-is JavaScripti animatsioonid luuakse helistades moodul.animatsioon () tehase meetod koos animatsiooni nime, mida soovite ehitada, ja funktsioon, mis määrab animatsiooni käitumise.

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-i animatsiooni nimetamise kord on CSS-i klassipõhine. Sellepärast oleme nimetanud oma animatsiooni .bg animatsioon ja mitte bg-animatsioon . AngularJS-animatsioonid on tegelikult sündmuste konksude komplekt, mida kasutatakse selleks, et delegeerida ükskõik mida, mida te oma animatsioonide tegemiseks tegelikult kasutate, olgu see siis CSS-i üleminek, CSS-i võtmekaader-animatsioon või JavaScripti animatsioon. Tegeliku animatsiooniosa delegeerimisega annab AngularJS teile lõputud võimalused animatsioonide käsitlemiseks vastavalt teie äranägemisele, olgu see siis käsitsi või kolmanda osapoole teeki kasutades.

Meie puhul kuulame seda sisenema ja lahkuma millal käivitatav sündmus ng-kui lisab või eemaldab DOM-i elemendi. Mõlemad ürituste läbiviijad võtavad element samuti a tehtud parameeter. The element parameeter on element, millele animatsioonisündmus käivitati, ja tehtud Parameeter on tagasihelistus, mida tuleb kutsuda, kui animatsioon on valmis, nii et AngularJS teab, et see saab ohutult edasi liikuda.

Kui tagastate funktsiooni animatsioonis, käivitatakse see siis, kui animatsioon on valmis või see tühistatakse. See on vabatahtlik. See osutub siiski kasulikuks, kui peate elemendi animatsiooniga seotud atribuudid pärast animatsiooni sulgemist puhastama. Nüüd, kui meil on mõlema animatsioonisündmuse põhistruktuur paigas, on aeg lisada tegelikud animatsioonid.

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

Kui DOM-ile lisatakse taustpilt, soovime, et see algaks akna paremas servas ja liiguks vasakule.

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

Me saavutame selle TweenMax.fromTo ja käskides seda animeerida element 0,5 sekundit. Animatsiooni alguses seatakse vasakpoolse stiili atribuudiks $ window.innerWidth pikslid ja animatsioon ise seda animeerivad vasakule vara kuni 0 pikslit. Märkus kuni animatsiooniobjekt määratleme onComplete sündmuse käitleja ja seadistage sellele tehtud .

Enne kui läheme edasi, tasub ka mainida, et kasutame $ aken teenus, mis on põhimõtteliselt AngularJS-mähis natiivse aknaobjekti ümber. Seda teenust ei pikendata ega pakita mingil viisil, nii et $ aken teenus toimib täpselt nagu tavaline aknaelement.

Animatsioon taustpildi eemaldamiseks DOM-ist on veidi lihtsam.

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

Sest element on juba paigas, pääseme lihtsalt kasutades TweenMax.to ja vasakule vara negatiivsele $ window.innerWidth . See libistab pildi ekraanilt vasakule. Ja nüüd, kui meil on oma .bg animatsioon määratletud, kuidas me selle tegelikult tööle paneme? Pidage meeles, et animatsioonid järgivad CSS-i klassipõhist nimetamiskorda. Siin on taustpildid ilma animatsioonita.

Ja siin on taustpildid, kus animatsioon on lubatud.

ya

Ja ongi kõik! Peate lihtsalt lisama oma elemendile animatsiooni, nagu oleks see CSS-klass. See hakkab palju sarnanema klassipõhise direktiiviga, kas pole? Tõeliselt võimas värk!

Suurendage pilte õigesti

Võib-olla olete märganud bg atribuut meie taustpildil. See atribuut tähistab direktiivi, mille ma kirjutasin, et muuta pildid õigesti ekraani kogu laiuse ja kõrguse suuruseks. Ma tegin seda, teisendades vinge jQuery.fullBG pistikprogrammi @bavotasan . Saate tutvuda lähtefailide direktiiviga ja lugeda algse pistikprogrammi kohta siin .

mis on linnu nimi twitteri logost?

Sisupaneel libiseb vasakult sisse, taustpilt aga paremalt

Sisupaneel libiseb vasakult sisse, taustpilt aga paremalt

Animeerige sisupaneel

Oleme oma veebisaidiga peaaegu valmis. Ainus puuduv tükk on sisupaneeli animeerimine. Me käsitleme seda natuke teisiti, muutes selle nähtavuse sidumise ng-peida nimelise vara juurde isInTransit peal ulatus $ .

Me määratleme isInTransit peal ulatus $ ja seejärel seadistate sellele vale kuna me tahame, et sisupaneel oleks esialgu nähtav.

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

Hääletame isInTransit kuni tõsi kui on seatud uus leht, mis põhjustab sisupaneeli peitmist. Hääletame ka isInTransit kuni vale kui bgTransitionComplete sündmus käivitatakse. Pange see sündmus mõttesse, sest jõuame hetkega sinna, kus see vallandatakse.

Nüüd see isInTransit on määratletud ja meil on võimalus seda seada tõsi või vale , on aeg ühendada see HTML-iga.

Eelmises koodis lülitame sisupaneeli nähtavuse väärtusele isInTransit koodiga ng-hide = 'isInTransit' . Oleme ka klassi lisanud paneel-animatsioon , mille järgmisena määratleme AngularJS-animatsioonina.

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

Programmi põhifunktsioonid ng-peida nimeline klass lisatakse ja eemaldatakse ng-peida , mis selgitab, miks selle animatsiooni sündmused on addClass ja removeClass . Sel juhul tahame teha animatsiooni ainult siis, kui lisatav või eemaldatav klass on ng-peida , mistõttu kontrollime klassiNimi parameeter.

Kui klassiNimi on ng-peida , siis teostame animatsiooni ja kui ei, siis helistame lihtsalt tehtud tagasihelistamine (mis animatsiooni põhimõtteliselt vahele jätab). Ja nüüd, kui struktuur on paigas, on aeg lisada TweenMaxi animatsioonid.

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

Millal ng-peida on lisatud, soovime sisupaneeli lavalt välja animeerida.

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

Me teeme seda seades läbipaistmatus kuni 0 0,2 sekundi jooksul. Ja millal ng-peida eemaldatakse, libistame sisupaneeli vasakult sisse ja tuhmime selle uuesti sisse.

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

Me hakkame kasutama TweenMax.fromTo alustamiseks (ekraanist vasakul asuv paneel) ja läbipaistmatus kohta 0 koos objekt {läbipaistmatus: 0, vasak: element. laius ()} . Seejärel hakkame seda seadistades tuhmuma läbipaistmatus kuni 0,8 või 80% ja vasakule kuni 0 .

Sest me ei saa seada ! oluline programmiliselt JavaScripti abil eemaldame lihtsalt ng-peida klass käsitsi element.removeClass ('nghide') . See on lihtsalt kahetsusväärne reaalsus animatsioone sel viisil teha, kuid see on ainult väike rõngas, millest läbi hüpata.

Mäletate, kui ma ütlesin, et peaksite selle üles märkima bgTransitionComplete sündmus, mida me kontrolleris kuulasime? Noh, praegusel kujul on meil võimalus seada isInTransit kuni tõsi see peidab sisupaneeli, kuid me ei määra seda vale sisupaneeli tagasi toomiseks.

Me tahame, et sisupaneel libiseb sisse pärast seda, kui taustpildi animeerimine on lõpetatud, nii et me hakkame selle sündmuse käivitama. Nii näiteks vaadake järgmist koodi:

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

Esimene asi, mida peame tegema, on süstimine $ rootScope sisse .bg animatsioon , et saaksime seda kasutada sündmuste edastamiseks veebis. Siis määratleme tegeliku funktsiooni, mida millal kutsutakse onComplete tulekahjud. Selles funktsioonihalduris me paneme selle natuke koodi.

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

Sest onComplete tagasihelistamine toimub TweenMaxi operatsiooni osana, peame AngularJS-i teavitama, et on juhtunud midagi, millest ta peab teadma. Seetõttu helistame Rakenda $ rootScope. $ ja helistamine $ rootScope. $ broadcast ('bgTransitionComplete') ; sulgemises. Ja kõige lõpuks, me helistame tehtud () animatsiooni lõpetamiseks ja juhtimise tagamiseks AngularJS-ile.

Järeldus

Meil on täiesti toimiv veebisait, mis on üles ehitatud AngularJS ja Greensock! Minu jaoks on kõige muljetavaldavam see, et kui funktsionaalsus on paigas, on animatsioonide seadistamine üsna lihtne. Soovitan tutvuda Moo aasta ajaveebi autor Matias Niemelä. Ta kirjutas ngElusta , nii et ta on väga kvalifitseeritud sellest rääkima ja on andnud mõned ressursid uue API kasutamise õppimiseks.

See artikkel ilmus algselt netiajakiri väljaanne 249.

Seotud artiklid: