Nuo medijos priklausomų „JavaScript“ animacijų taisymas reaguojančiose svetainėse

Sąlyginių „JavaScript“ animacijų problemos supratimas

Naudojant interaktyvų žiniatinklio dizainą, dažnai reikia įtraukti skirtingus skirtingų tipų įrenginius ar ekrano dydžius. Šioje situacijoje gali būti sudėtinga naudoti „JavaScript“, kad būtų galima valdyti animacijas, pagrįstas medijos užklausomis. Kai dvi animacijos (po vieną kiekvienam įrenginiui) neveikia vienu metu, kaip tikėtasi, tai yra dažna problema.

Šiame scenarijuje naudojamos dvi „JavaScript“ animacijos: viena skirta „navigacijos slinkčiai“ (tinka didesniems ekranams), kita – „cta scroll“ (raginimas veikti), skirta mažesniems įrenginiams. Sunkumas yra užtikrinti, kad kiekviena animacija būtų rodoma atskirai pagal ekrano plotį ir išvengiama susidūrimų.

Kai skirtingose ​​scenarijaus žymose nustatomos dvi animacijos ir tik viena iš jų veikia tinkamai, iškyla problema. Neatsargiai įdiegus jas sujungus pagal vieną sąlygą arba sujungus scenarijaus žymas, gali kilti papildomų problemų, ypač naudojant medijos užklausas, pvz., „window.matchMedia()“.

Šiame įraše bus aptarta, kaip naudoti medijos sąlygas „JavaScript“ tvarkymui, kad kiekviena animacija veiktų taip, kaip numatyta. Kad būtų užtikrintas sklandus perėjimas tarp mobiliojo ir didesnio ekrano, jis daug dėmesio skirs atitinkamiems sąlyginiams teiginiams ir medijos užklausoms.

komandą	Naudojimo pavyzdys
window.matchMedia()	„JavaScript“ naudoja šią techniką medijos užklausoms taikyti. Remiantis ekrano dydžiu, jis nustato, ar dokumentas atitinka nurodytą CSS medijos užklausą, ir inicijuoja atitinkamas JavaScript operacijas. Šis scenarijus leidžia lengviau atskirti didesnių ekranų animacijas nuo mobiliųjų.
addEventListener("change", callback)	Ši komanda stebi medijos užklausos būsenos pakeitimus. Funkcija, teikiama kaip atgalinis skambutis, atliekama, kai ekrano plotis viršija iš anksto nustatytą slenkstį (pvz., 450 pikselių). Tai leidžia dinamiškai reaguoti nereikalaujant puslapio atnaujinimo.
removeEventListener("scroll", callback)	Pašalindama beprasmišką įvykių tvarkymą netinkamo dydžio ekrane, ši komanda optimizuoja greitį pašalindama slinkties įvykių klausytoją, kai jo nebereikia. Keičiant žiniasklaidos užklausas, tai būtina.
window.pageYOffset	Šis atributas grąžina pikselių, kurie dokumente buvo slinkti aukštyn ir žemyn, skaičių. Jis naudojamas norint nustatyti, ar vartotojas slenka aukštyn ar žemyn, ir stebėti slinkimo padėtį.
element.style.top	Ši komanda koreguoja elemento viršutinę CSS ypatybę, kuri valdo vertikalią elemento padėtį puslapyje. Čia jis naudojamas norint nustatyti, kurioje vartotojo slinkties vietoje turi būti rodoma arba paslėpta naršymo juosta.
element.style.left	Ši komanda perkelia elementus horizontaliai, koreguojant kairiąją CSS ypatybę, kaip tai daro element.style.top. Mobiliuosiuose įrenginiuose jis naudojamas raginimo veikti mygtukui įstumti ir iš jo matyti.
mediaQuery.matches	Ši ypatybė patikrina, ar medijos užklausa ir dokumentas dabar sutampa. Norint užtikrinti, kad mobiliuosiuose įrenginiuose būtų pritaikyta tinkama animacija, o ne staliniuose kompiuteriuose, būtina sąlygiškai paleisti atitinkamas animacijas pagal ekrano plotį.
prevScrollpos >prevScrollpos > currentScrollPos	Norint nustatyti slinkimo kryptį (aukštyn arba žemyn), ši sąlyga patikrina slinkimo vietas iš ankstesnės ir dabartinės iteracijos. Labai svarbu nustatyti, kaip elementai turėtų reaguoti į slinkimą, pvz., atidengdami arba paslepdami mygtukus arba naršymo juostas.
onscroll	Integruota įvykių tvarkytuvė, kurią suaktyvina vartotojas slinkdamas. Palyginus ankstesnę ir dabartinę slinkties padėtis, ji atlieka slinkimu pagrįstą animaciją.

„JavaScript“ animacijų tvarkymas pagal ekrano dydį

Ankstesni „JavaScript“ scenarijų pavyzdžiai buvo sukurti siekiant išspręsti dviejų skirtingų animacijų problemą – vieną staliniams kompiuteriams ir kitą mobiliesiems įrenginiams. Svarbiausias iššūkis yra užtikrinti, kad kiekviena animacija prasidėtų tik tada, kai jos reikia, atsižvelgiant į įrenginio ekrano plotį. The Tam naudojama technika, leidžianti kodui identifikuoti atvejus, kai tenkinamos konkrečios medijos užklausos sąlygos. Scenarijai užtikrina, kad kiekviena animacija veiktų atskirai, atsižvelgiant į ekrano dydį, naudojant skirtingas darbalaukio (min. plotis: 450 pikselių) ir mobiliojo ryšio (maksimalus plotis: 450 pikselių) sąlygas.

Didesnio ekrano naršymo juostos slinkimo veiksmai tvarkomi pirmajame scenarijuje. Priklausomai nuo slinkties krypties, juosta lieka matoma arba išnyksta, kai vartotojas slenka aukštyn arba žemyn. Naudojant ir kintamieji, tai valdoma lyginant ankstesnę ir dabartinę slinkties padėtis. Slenkant aukštyn naršymo juosta vėl rodoma nustačius jos viršutinę padėtį į 0, o slenkant žemyn ji išnyksta, pasislenkant iš vaizdo ir nustačius neigiamą viršutinę vertę.

Antrasis scenarijus susijęs su mobiliųjų įrenginių raginimo veikti (CTA) mygtuku. Visų dydžių ekranuose rodomas raginimo veikti mygtukas, tačiau jis animuojamas tik tada, kai ekrano plotis yra mažesnis nei 450 pikselių. Kai naudotojas slenka aukštyn, mygtukas pasislenka iš kairės ekrano pusės; kai jie slenka žemyn, mygtukas dingsta iš vaizdo. Naudojant tą pačią slinkties padėties palyginimo logiką kaip ir naršymo juostoje, šis elgesys yra palyginamas. Tačiau, užuot pakeitusi viršutinę reikšmę, ji pakeičia mygtuko kairę vietą, todėl ji pasirodo arba išnyksta, atsižvelgiant į slinkimo kryptį.

Du scenarijai skirti veikti atskirai vienas nuo kito. Tačiau jie yra įtraukti į sąlygines išraiškas, kurios patikrina ekrano plotį, kad būtų išvengta konfliktų. Su , medijos užklausos gali būti naudojamos tiesiogiai „JavaScript“, leidžiant scenarijus dinamiškai pereiti tarp dviejų animacijų netrukdant viena kitai. Išlaikant pašalines animacijas nustatytame ekrano plotyje, šis modulinis metodas padidina efektyvumą ir garantuoja sklandų darbą staliniuose ir mobiliuosiuose įrenginiuose.

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollFunction(); };

function scrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQueryNav.matches) {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  if (mediaQueryCta.matches) {
    // CTA scroll for mobile screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  }
  prevScrollpos = currentScrollPos;
}

var prevScrollpos = window.pageYOffset;
var mediaQueryNav = window.matchMedia("(min-width: 450px)");
var mediaQueryCta = window.matchMedia("(max-width: 450px)");

mediaQueryNav.addEventListener("change", handleNavScroll);
mediaQueryCta.addEventListener("change", handleCtaScroll);

function handleNavScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", navScrollFunction);
  } else {
    window.removeEventListener("scroll", navScrollFunction);
  }
}

function handleCtaScroll(e) {
  if (e.matches) {
    window.addEventListener("scroll", ctaScrollFunction);
  } else {
    window.removeEventListener("scroll", ctaScrollFunction);
  }
}

function navScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-90px";
  }
  prevScrollpos = currentScrollPos;
}

function ctaScrollFunction() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-button").style.left = "0.25in";
  } else {
    document.getElementById("header-button").style.left = "-10in";
  }
  prevScrollpos = currentScrollPos;
}

// Initial call to apply the correct event listeners
handleNavScroll(mediaQueryNav);
handleCtaScroll(mediaQueryCta);

var prevScrollpos = window.pageYOffset;
var mediaQuery = window.matchMedia("(max-width: 450px)");

window.onscroll = function() { scrollHandler(); };

function scrollHandler() {
  var currentScrollPos = window.pageYOffset;
  if (mediaQuery.matches) {
    // CTA scroll for mobile
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("header-button").style.left = "0.25in";
    } else {
      document.getElementById("header-button").style.left = "-10in";
    }
  } else {
    // Navigation scroll for larger screens
    if (prevScrollpos > currentScrollPos) {
      document.getElementById("navigation").style.top = "0";
    } else {
      document.getElementById("navigation").style.top = "-90px";
    }
  }
  prevScrollpos = currentScrollPos;
}

„JavaScript“ optimizavimas reaguojančioms animacijoms

Svarbiausias komponentas kuriant interaktyvias svetaines yra užtikrinti, kad perėjimai ir animacijos reaguotų skirtingai skirtingo dydžio įrenginiuose. Veiksmingas būsenos valdymas yra labai svarbus dirbant su medijos užklausomis ir „JavaScript“, ypač kai animacijas ketinama paleisti tik tam tikro dydžio ekranuose. Čia dinamiški įvykių klausytojai ir ateiti į žaidimą. Naudodami šiuos įrankius kūrėjai gali užtikrinti, kad animacijos būtų paleidžiamos tik tada, kai tenkinami tam tikri kriterijai, taip pagerinant vartotojo patirtį ir našumą tiek staliniuose, tiek mobiliuosiuose platformose.

Daugelio vienu metu paleidžiamų animacijų tvarkymas sukelia dar vieną sunkumą „JavaScript“ animacijai, kuri priklauso nuo medijos. Funkcijų padalijimas į lengviau valdomus, modulinius įvykių klausytojus šioje situacijoje gali padaryti stebuklus. Veiksmingiau atskirti įvairias funkcijas ir jas suaktyvinti pagal konkrečias medijos užklausas, o ne vykdyti visus scenarijus vienu metu. Taip užtikrinama, kad kiekvienas scenarijus atitinkamame įrenginyje veiktų taip, kaip numatyta, ir padeda sutaupyti nereikalingos naršyklės apkrovos.

Mobiliųjų įrenginių našumo optimizavimas yra ypač svarbus dirbant su reaguojančia animacija. Kadangi mobilieji įrenginiai dažnai turi mažesnę apdorojimo galią nei staliniai kompiuteriai, mobiliųjų įrenginių našumą galima pagerinti sumažinus scenarijaus sudėtingumą. Šis panaudojimo pavyzdys įvykių tvarkytojas veiksmingai garantuoja sklandų mobiliesiems skirtų animacijų, tokių kaip „cta scroll“, veikimą neapmokestinant įrenginio išteklių. Be to, tai garantuoja, kad didesni įrenginiai įkelia animacijas tik proporcingai ekrano dydžiui.

1. Kaip naudoti medijos užklausas „JavaScript“?
2. „JavaScript“ leidžia taikyti medijos užklausas su . Šį būdą galite naudoti norėdami paleisti skirtingus scenarijus pagal ekrano plotį.
3. Kaip valdyti animacijas pagal ekrano dydį?
4. Naudokite nustatyti ekrano plotį, kad būtų galima valdyti animaciją. Tada pridėkite arba pašalinkite įvykių klausytojus, jei reikia. Tai garantuoja, kad, priklausomai nuo ekrano dydžio, bus paleista tik atitinkama animacija.
5. Koks yra geriausias būdas optimizuoti slinkimo animaciją?
6. Sumažinus slinkties įvykyje atliekamų operacijų skaičių, gali būti veiksmingiau naudojamas optimizuojant slinkties animaciją. Kai aptinkamas slinktis, tik tada vykdoma reikiama animacijos logika.
7. Kaip tvarkyti kelias animacijas „JavaScript“?
8. Galima valdyti kelias animacijas suskirstant jas į skirtingas sąlygas ir įvykių klausytojus. Tai sumažina konfliktų tikimybę, nes kiekviena animacija veikia atskirai.
9. Ką daro ir padaryti slinkties animacijoje?
10. Šie kintamieji stebi, kur vartotojas slenka. Išsaugoma ankstesnė slinkties padėtis , o dabartinė slinkties padėtis išsaugoma . Palyginus galima nustatyti, ar vartotojas slenka aukštyn ar žemyn.

Apibendrinant galima pasakyti, kad norint sukurti interaktyvią svetainę, reikia valdyti JavaScript animacijas įvairiems įrenginiams. Kūrėjai gali užtikrinti optimalią vartotojo patirtį suaktyvindami konkrečias animacijas pagal ekrano plotį naudodami tokius įrankius kaip .

Tinkamai įdiegus, svetainės gali pagerinti savo vizualinį elgesį ir našumą įvairiuose įrenginiuose. Vienas iš būdų tai padaryti yra pasirinktinai taikyti slinkties animacijas ir jas atskirti. Šis metodas garantuoja sklandų perėjimą tarp darbalaukio ir mobiliųjų animacijų ir padeda išvengti scenarijaus susidūrimų.