Animatsiooniline veebiarendus: jQuery

Animatsiooniline veebiarendus: jQuery

jQuery on tänapäeval arvatavasti kõige kuulsam JavaScripti teek. Seda kasutatakse tervete veebilehtede (front-end osa) loomiseks.

jQueryt saab ka kasutatada veebilehtede animeerimiseks, kuigi tegemist ei ole kõige kiirema animatsioonimootoriga.

Küll aga on jQuery parem CSSi animatsioonist, sest JavaScriptiga saab hoida koodi paremini hoomatavana ja JavaScritpis saab teha ka keerulisemaid ja rohkem muudetavaid efekte.

jQuery animate()

jQuery animate() (nagu nimigi ütleb) on kõige tavalisem animatsioonifunktsioon. Sellega saab animeerida kõiki elemendi omadusi, millel on üksik numbriline väärtus.

animate() funktsiooni saab välja kutsuda mitut moodi.

Esimene viis – $("element").animate(properties, duration, easing, complete)

Nagu näha võid, käib animate() funktsioon jQuery objekti alla ($("element").animate()).

Tänases postituses käivad enamus funktsioonidest jQuery objekti “külge”.

Parameeter properties

properties on tavaline JavaScripti objekt, mis omab endas CSSi omadusi, mida kasutatakse animatsioonis. properties on ainukene kohustuslik parameeter jQuery animate() funktsioonis.

Animeerimisel ei defineerita animatsiooni algväärtusi, vaid need võetakse elemendi enda CSSist.

Näiteks kui properties on midagi sellist:

var properties = {
    width: "100px",
    height: "100px",
    left: "100px"
};

$("element").animate(properties);

siis sõltumata sellest, kas antud elemendil on olemas eelnimetatud CSSi omadused, tuleb animate() ja lisab need elemendile inline stiilina sujuvalt juurde (ekraanil on näha elemendi muutumist järk-järgult ehk animeerimist).

Kui properties väärtused on samad, mis elemendil olemas olid, siis animatsiooni näitlikult ei toimu (kasutaja ei näe muutust), aga need on siiski juurde lisatud inline stiilina, mis “sõidab üle” algse CSSi.

Kõik jQuery stiilid ja animatsioonid lisatakse elemendil juurde inline stiilina.

 

NB! Nagu näha võid on kõik CSSi omaduste väärtused pandud jutumärkide sisse. Seda tuleks teha, siis kui on soov täpsustada mõõtühik. Tavalise numbri (nt. 100) väärtusena andmine tähistab alati pikslit.

Kui aga on soov mingit teist mõõtühikut kasutada, siis tuleb väärtuseks anda sõne koos numbrilise väärtuse ja (CSSi) mõõtühikuga (nagu mina oma näites tegin).

Soovitav oleks mõõtühik siiski defineerida, sest see toob koodi selgust.

jQuerys saab kasutada animatsiooni omaduste väärtustena ka "show" , "hide" ja "toggle".

  • "show" teeb elemendi nähtavaks
  • "hide" peidab elemendi
  • "toggle" näitab või peidab elemendi sõltuvalt praegusest väärtusest

Näiteks kui me soovime luua rippmenüüd, mis avaneks ja läheks kinni, kui sellel klikkame, oleks lahendus üsnagi lihtne.

$("element").click(function(){
    $("element").animate({
        height: "toggle"
    });
}); 

Täpselt samamoodi toimub ka asi "show" ja ka "hide" väärtustega.

Kõige paremini töötavad eelnimetatud väärtused just elemendi suuruste ja nähtavusega.

Mis on toredat veel jQuery kui ka teiste JavaScripti animatsiooni mootorite juures on see, et elementidele saab lisada suhtelisi väärtusi. See tähendab, et me saame lisada vanale väärtusele juurde mingi uue väärtuse ilma teadmata esialgset väärtust.

Lihtsamaks viisiks uue väärtuse lisamisel on kasutada lühendeid+= või -=

Näiteks tahame liigutada elementi edasi 20 piksli võrra iga kord kui vajutame nupule.

$("element").click(function(){
    $("element").animate({
        left: "+=20px"
    });
});

Suhteline liitmine/lahutamine töötab ka teiste (numbriliste) omadustega.

 

jQuery animate() suudab ainult animeerida (nagu ka ennist mainisin) CSSi omadusi, millel on üksik numbriline väärtus. Näiteks saab animeerida width, height jne, kuid CSSi omadust background-color ei suuda jQuery ilma pluginata animeerida.

Allpool räägin täpsemalt värvidest

Veel ei suuda jQuery animeerida CSSi üldisi omadusi (background, border, font jne), kuid jQuery on võimeline muutma osade üldiste omaduste alamomadusi, mille vääruseks on number.

Näiteks on omadusel border olemas alamomadus border-radius, millel on numbriline väärtus ja mis muudab elemendi ääre/kuju ümmargusemaks.

border-radius saab lisada parameetrisse properties kahel viisil.

Esimene viis oleks kasutada CSSi õiget nime koos jutumärkidega:

var properties = {
    width: "100px",
    height: "100px",
    left: "100px",
    "border-radius": "50%"
};

Teine viis, mida vist kasutatakse tihedamini ja on soovitatav, sest on rohkem JavaScripti sõbralikum, on eemaldada sidekriips ja muuta järgmise sõna esimene täht suureks – nagu camelCase (nt. CSSi margin-left on JavaSctiptis marginLeft).

var properties = {
    width: "100px",
    height: "100px",
    left: "100px",
    borderRadius: "50px"
};

jQuerys on olemas ka teatud mitte-stiilimis omadused nagu näiteks scrollTop ja scrollLeft, mis lubab animatsioonis automaatset ja sujuvat kerimist.

Parameeter duration

duration on animatsiooni kestvus. Tegemist ei ole kohustusliku parameetriga, sest jQueryl on eelnimetatud parameeter juba vaikimisi olemas.

duration väärtusteks võib anda kas arvu, mis tähistab kestvust millisekundites või kindla sõne.

Olemas on kaks kindlalt sõne väärtust:

  • "slow" – animatsioon on aeglane (kestvus 600ms)
  • "fast" – animatsioon on kiire (kestvus 200ms)

Kui duration parameetrit ette ei anta, siis mängib jQuery animatsiooni vaikimisi kestvusega ja selleks on 400ms.

//Mängib animatsiooni 1000 millisekundit ehk 1 sekundi
$("element").animate(properties, 1000);
Parameeter easing

easing määrab ära animatsiooni siseajastuse (ei leidnud paremat eesti keelset vastet). See ei tähenda seda, et animatsiooni kestvus muutuks, vaid see tähendab seda, et kuidas animatsiooni mängitakse – millal animatsioon kiirendab, aeglustub jne (ette antud kestvuses).

easing on tüübilt sõne ja ilma pluginateta jQuery toetab ainult kahte animatsiooni siseajastust:

  • "linear" – animatsiooni ajastus on lineaarne ehk animatsioon ei kiirenda ega aeglustu animatsiooni vältel.
  • "swing" – animatsioon on natukene aelgasem alguses ja lõpus kui on seda keskel. Sarnane CSSi animatsiooni siseajastusega ease. "swing" on vaikimsi väärtus.

Ajastust saab lisada kahte moodi. Üks moodus on see lisada läbi parameetri easing, mis muudab kõikide omaduste animeerimisajastust. Teine võimalus on aga lisada see eraldi omadustele läbi massiivi.

Massiivi esimeseks kohaks on CSSi omaduse väärtus ja teisel kohal animatsiooni siseajastus.

$("element").animate({
    width: ["100px", "linear"],
    height: "100px"
});

Siin näites animeerib jQuery width siseajastusega "linear" sajale pikslile.

NB! Kui ei ole antud easing parameetrit (nagu mul näites), siis kasutab jQuery kõikide omaduste animeerimiseks vaikimisi väärtust "swing".

Selle tõttu kasutab height ikkagi "swing" siseajastust, sest see on vaikimisi väärtus.

Kui aga easing parameeter on olemas, siis kasutab jQuery kõikide omaduste animeerimiseks antud parameetrit.

Praegune jutt ei käi eraldi, massiiviga defineeritud omaduste kohta, sest eraldi defineeritud ajastused ei sõltu parameetrist.

Parameeter complete

complete on tagasikutsumisfunktsioon (callback function), mis käivitub siis kui animatsioon on valmis.

complete funktsiooni kasutatakse tihti uute käskude käivitamiseks, kui animatsioon lõpetab ning ka animatsioonide silmuses hoidmises.

Näiteks kui tahame animatsiooni lõppedes tervitada kasutajat, siis saame teha järgmist:

$("element").animate(properties, 1000,
    function(){
        alert("Tere kasutaja!");
    }
);

Kui animatsioon lõpeb, siis käivitatakse meie anonüümne funktsioon ja näidatakse kasutajale sõnumit “Tere kasutaja!”.

Kui aga soovime hoida animatsiooni pidevas silmuses, siis oleks lahendus järgmine:

function loopAnimation(){
    $("element").animate(properties, 1000,
        function(){
            //Eemaldame animeeritud omadused ja nende väärtused
            $(this).removeAttr("style");
            //Kutsume uuesti funktsiooni loopAnimation välja
            loopAnimation();
        }
    );
}

Teine viis – $(“element”).animate(properties, options)

Teine moodus on esimesest natukene parem, sest sellega saab paika panna rohkem sätteid animeerimiseks.

Parameeter properties

properties on täpselt sama, mis esimeses viisis. Kõik, mis ma enne properties kohta välja tõin kehtib ka siin – tegemist on ju siiski ühe ja sama funktsiooniga 😉 .

Parameeter options

options parameeter on tavaline JavaScripti objekt, mis omab endas animatsiooni sätteid.

Eelmises viisis olid animatsiooni sätted eraldi välja toodud parameetritena, aga praeguses mooduses võib need defineerida options objekti omadustena.

NB! Parameeter options ega ükski options omadus ei ole kohustuslik funktisoonis animate(). Kui omadusi ei ole ette antud, siis kasutab jQuery vaikimisi väärtuseid

Nii et, kui on soov luua animatsioon, mis animeeriks elemendi laiuse ja kõrguse sajale pikslile ühe sekundiga, linear ajastusega ning animatsiooni lõppedes tervitaks kasutajalt, siis tuleks teha järgmist:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    },
    {
        duration: 1000, //millisekundites
        easing: "linear",
        complete: function(){
            alert("Hello World");
        }
    }
);

Neid omadusi ma edaspidi enam ei seleta, kuna olen need juba lahti seletanud esimeses viisis.

Nagu näha on parameetrid, mis olid esimeses viisis toodud üle lihtsalt teise options objekti (ehk parameetrisse) vajalikke võtmesõnadega.

Kuid options parameetrisse saab lisada veel omadusi ja väärtusi, mis annab animatsiooni üle suurema kontrolli.

Omadus specialEasing

specialEasing vastab põhiliselt eraldi, massiiviga välja toodud animatsioonide siseajastusele, kuid see lubab eraldi siseajastust rakendada ilma massiivita.

specialEasing on tüübilt JavaScripti tavaline objekt, mille omadusteks on objekti properties omadused ja väärtusteks on vastavad ajastused.

Ilma massiivita, kuid specialEasing omadustega defineeritud eraldi olevad siseajastused:

$("element").animate(
    {
        width: "100px",
        height: "100px",
        left: "10px"
    }, 
    {
        specialEasing: {
            width: "linear", //jQuery animeerib laiuse ajastusega "linear"
            height: "swing" //Kuigi "swing" on vaikimisi väärtus, tõin ma selle siiski näitena välja
            //left animeeritakse ka "swing" ajastusega, sest see on vaikimisi väärtus
        }
    });

Kui options objektis oleks ka olemas easing omadus, siis see asendaks vaikimisi väärtust

Omadus queue

queue väärtuseks võib kas olla kahendmuutuja (inglise keeles boolean) või sõne. queue tähistab jQuerys (ette antud elemendi) animatsioonide järjekorda.

Kui queue on true (vaikimisi väärtus), siis on elemendi animatsioonid üldises jQuery efektide järjekorras. Animatsioon käivitub, siis kui teised, temast eespool olevad animatsioonid on lõpetatud.

Kui aga queue on false, siis animatsioonid ei ole üheskis järjekorras ning käivituvad automaatselt sõltumata teistest animatsioonidest.

Viimaseks võimaluseks saab queue väärtuseks olla sõne, mis tähistab täiesti eraldi seisvat järjekorda. Nii saab luua unikaalseid järjekordi, mis ei sõltu teistest järjekordadest.

Eraldi seisvaid järjekordi saab käivitada läbi dequeue() funktsiooni (sellest allpool).

NB! Kogu animeerimine käib jQuerys üksikelemendi põhiliselt – see tähendab seda, et animatsiooni omadused (kestvus, siseajastus, järjekord jne) käivad ühe elemendi alla. Lihtsamalt öeldes ja praeguse alampunkti teemat puudutades – ühe elemendi animatsiooni järjekord ei sõltu teise elemendi animatsiooni järjekorrast.

Näide omadusest queue:

$("element").animate(
    {
        width: "100px",
        height: "100px",
        left: "10px"
    }, 
    {
        queue: false //Animatsioon ei ole üheskiks järjekorras ja kävitub automaatselt
    }
);

 

Nüüd järgnevad tagasikutsumisfunktsioonid, mis käivad selle jQuery (HTMLi) objekti alla, mida praegu animeeritakse. Kui elementi pole paika pandud, siis tagasikutsumisfunktsioone ei kävitata.

Tagasikutsumisfunktsioonid ega nende parameetrid ei ole kohustuslikud. See tähendab, et parameetreid ei pea kirja panema, isegi siis kui funktsioon on defineeritud. Näiteks step funktsioonil on kaks parameetrit, aga neid ei pea märkima – jQuery ei saada lihtsalt tagasikutsumisel argumente (kahe sõnaga öeldes – valikulised parameetrid 😀 ).

Tagasikutsumisfunktsioone lihtsalt kasutatakse, et omada suuremat kontrolli animatsioonide üle.

Ei tea tagasikutsumisfunktsioonidest midagi? Ole mureta, siit leiad päris hea õpetuse.

Omadus step

step tagasikutsumisfunktsiooni kutsutakse välja iga animeeritava omaduse muutumisel.

Näiteks on meil kaks omadust – width ja height. Nüüd kui muudetakse width väärtust, siis kutsutakse step välja. Täpselt samamoodi käib ka asi height omadusega.

step funktsioonil on ka kaks parameetrit – now ja tween. now esindab muudetava omaduse praegust väärtust ja tween terve animatsiooni omadusi.

step näide:

$("element").animate(
    {
        width: "100px"
    }, 
    {
        step: function(now, tween){
            //Kutsutakse välja pärast iga animeeritava omaduse muutmisel
            $(this).css({height: now}); //Anna kõrgusele laiuse muutumisel laiuse väärtus
        }
    }
);
Omadus progress

progress on üsnagi sarnane stepiga, kuid erinevalt stepist kutsutakse progress välja pärast igat step funktsiooni ehk pärast animeeritavate omaduste muutmist.

Seda võib nimetada ka iga animatsioonitsükli funktsiooniks, sest kui üks animatsioonitsükkel läbi saab, nii käivitatakse progress (sellest ka nimi).

progressil on kolm parameetrit animation, progress ja remainingMs.

  • animation tähistab praegust animatsiooni objekti ehk siin on kirjas animatsiooni omadused.
  • progress esitab animatsiooni senise progressi protsendides ehk sajandikes
  • remainingMs näitab mitu millisekundit on jäänud animatsiooni lõpuni

Näide omadusest progress:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    }, 
    {
        progress: function(animation, progress, remainingMs){
            //Kutsutakse välja pärast step funktsiooni
            console.log(progress * 100); //Väljasta animatsiooni senine progress protsentides
        }
    }
);
Omadus start

start on väga lihtne – see kutsutakse välja ainult, siis kui animatsioon pihta hakkab.

start funktsioonil on üks parameeter ja selleks on animation, mis tähistab animatsiooni objekti nagu progress omaduses.

start näide:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    }, 
    {
        start: function(animation){
            //Kutsutakse välja pärast ühekorra animatsiooni alguses
            alert("Animatsioon algas"); //Teavita kasutajat, et animatsioon algas
        }
    }
); 
Omadus done

done tagasikutsumisfunktsioonist on natukene raske aru saada, sest selle ülesanne on sarnane complete funktsiooniga, kuid siiski kohati erinev.

Väga lihtsalt öeldes kutsutakse done välja, siis kui animatsioon on lõppenud (nagu complete funktsioon), kuid erinevalt completest kutsutakse done välja koheselt pärast animatsiooni lõppemist.

See tähendab, et done funktsioonis ei arvestata Promise objektiga (see on automaatselt vastu võetud ehk tehtud). completes aga arvestatakse sellega.

Kui sa ei tea Promise objektidest midagi, siis lühidalt öeldes on Promise objektid need, millega saab kinnitada, et teatud protsess (siinjuhul animatsioon) on valmis ja lõpetatud. Ühe õpetuse Promise objektidest leiad siit

Natukene segane, eks ole? Kõige parem oleks see asi jätta meelde nii – complete kutsutakse välja siis kui done funktsioon lõpeb.

doneil on ka kaks parameetrit – animation ja jumpedToEnd. animation tähistab ikka praegust animatsiooni objekti ja jumpedToEnd on kahendloogika parameeter, mis on tõene, siis kui animatsioon “hüppab” lõppu ehk põhimõtteliselt animatsioon sunniti lõpetama (finish või teatud juhul stop funktsiooni läbi – nendest allpool)

Näide omadusest done:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    }, 
    {
        done: function(animation, jumpedToEnd){
            //Kutsutakse välja koheselt pärast animatsiooni lõppu (olenemata Promise objektist)
            console.log(jumpedToEnd); //Kas animatsioon oli sunnitud lõpetama (element sai animatsiooni lõppväärtused)?
        }
    }
); 
Omadus fail

fail nagu nimigi ütleb, kutsutakse välja, siis kui animatsioon mingil põhjusel läbi kukub (animatsioon ei jõua lõpuni). Tavaliselt on põhjuseks animatsioonide lõpetamine läbi stop funktsiooni.

failil on sarnaselt done funktsioonile kaks parameetrit – animation ja jumpedToEnd, mis tähendavad täpselt ja seda sama, mis dones.

Promise on siinkohal tagasilükatud ehk mitte lõpetatud.

fail näide:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    }, 
    {
        fail: function(animation, jumpedToEnd){
            //Kutsutakse välja, siis kui animatsioon kukkus läbi
            console.log(jumpedToEnd); //Kas animatsioon oli sunnitud lõpetama (element sai animatsiooni lõppväärtused)?
        }
    }
); 
Omadus always

always funktsioon käivitub alati pärast animatsiooni, olenemata, kas animatsioon lõpetati edukalt või see kukkus läbi.

alwaysil on ka parameetrid animation ja jumpedToEnd, samade otstarbetega, mis kahel eelmisel elemendil.

Promise on sõltuv animatsiooni tulemusest (lõpetatud või mitte lõpetanud)

Näide omadusest always:

$("element").animate(
    {
        width: "100px",
        height: "100px"
    }, 
    {
        always: function(animation, jumpedToEnd){
            //Kutsutakse välja alati pärast animatsiooni
            console.log(jumpedToEnd); //Kas animatsioon oli sunnitud lõpetama (element sai animatsiooni lõppväärtused)?
        }
    }
); 

jQuery erilised animatsiooni funktsioonid

jQueryl on olemas mõningad valmis tehtud funktsioonid, millel on kindel efekt. Neid on tegelikult päris palju ja neid on väga lihtne kasutada.

Tihtipeale saab neid funktsioone defineerida mitut moodi läbi parameetrite (nagu animate() funktsiooniga oli), kuid hea asi on see, et kõik parameetrid, mis ma animate() juures ära seletasin, on nendes funktsioonides samad. Unikaalsed argumendid seletan loomulikult lahti 🙂 .

Argumentide kohapealt veel nii palju, et kui parameetrid on nurksulgudes [parameeter], siis see ei ole kohustuslik.

Funktsioon $("element").show()

show() on kõige tavalisem efekt, mida jQuery eraldi pakub ja selle ülesandeks on muuta element nähtavaks.

Funktsiooni show() saab defineerida nelja moodi:

$("element").show();
$("element").show([duration], [complete]);
$("element").show([options]);
$("element").show([duration], [easing], [complete]);

Nagu näed ei ole olemas properties parameetrit, sest show() ja ka teistel erilistel funktsioonidel on CSSi omadused teada, mida animeeritakse.

Esimesel viisil ei ole ühtegi argumenti. Seda ei peeta animatsiooniliseks, sest see muudab elemendi lihtsalt nähtavaks.

Põhimõtteliselt sama vastand on $(“element”).display(“css”, “block”); vms, kuid kasutades show() funktsiooni või mõnda muud efekti, siis jääb vana väärtus jQuery vahemälusse alles ning sellele saab pärast ligi.

Teistel, parameetriga show() funktsioonidel on aga juba teatud animatsiooni hõng juures – show() animeerib laiuse, kõrguse ja nähtavuse kõik korraga ja üheaegselt.

Nüüd et see efekt kui ka teised efektid oleksid näha, siis peab loomulikult alguses olema display omadus vastandväärtusega. Näiteks praegu me muudame show() funktsiooni abil elemendi nähtavaks, siis display peab olema "none", et efekt töötaks.

Lisaks sellele peab siinkohal kui ka enamustes efektides olema ka defineeritud laius ja kõrgus, et jQuery teaks kui palju peab neid kahte omadust animeerima.

Funktsioon $("element").hide()

Loomulikult vastupidine efekt show() funktsioonile – hide() muudab elemendi nähtamatuks.

Nagu ka show() funktsiooni saab hide() efekti kirja panna neljal viisil:

$("element").hide();
$("element").hide([duration], [complete]);
$("element").hide([options]);
$("element").hide([duration], [easing], [complete]); 

Jällegi ilma parameetriteta funktsioon lihtsalt muudab elemendi nähtamatuks. Teised aga animeerivad laiust, kõrgust ja nähtavust korraga nagu show() funktsioonil, ainult et vastupidise otstarbega (element muudetakse nähtamatuks).

Funktsioon $("element").toggle()

toggle() muudab, kas elemendi nähtavaks või nähtamatuks sõltuvalt praegusest väärtusest. Kui element on nähtav, siis muudetakse element nähtamatuks ja vice versa.

toggle() funktsiooni saab kirja panna neljal moel:

$("element").toggle([display]);
$("element").toggle([duration], [complete]);
$("element").toggle([options]);
$("element").toggle([duration], [easing], [complete]); 

display on siin unikaalne kahendloogika parameeter. Kui display on "true", siis tehakse element alati nähtavaks ja kui väärtuseks on "false", siis muudetakse element alati nähtamatuks.

Jällegi kui ühtegi parameetrit ei anta (kõik argumendid on ju valikulised), siis toggle() ei ole animatsiooniline.

Aga kui vähemalt üks parameeter antakse (siinkohal välja arvatud display parameeter), siis kasutab toggle() animatsiooni.

toggle() efekti näide:

Funktsioon $("element").fadeIn()

Ma arvan, et see on kõige klassikalisem animatsioonilise veebiarenduse efekt/animatsioon üldse – sujuv sissetulek.

fadeIn() funktsiooni saab panna kirja kolmel viisil:

$("element").fadeIn([duration], [complete]);
$("element").fadeIn([options]);
$("element").fadeIn([duration], [easing], [complete]);

fadeIn() annab elemendi opacity väärtuseks 1 (protsendi mõistes sada) ja display väärtuseks ükskõik mille, kuid mitte "none" (tavaliselt on display väärtuseks, kas arendaja või brauseri poolt määratud väärtus).

Funktsioon $("element").fadeOut()

Põhimõttelt sama, kuid vastand fadeIn() efektile – sujuv väljaminek.

Nagu ka fadeIn() funktsiooni saab fadeOut() efekti kirja panna kolmel viisil:

$("element").fadeOut([duration],[complete]);
$("element").fadeOut([options]);
$("element").fadeOut([duration], [easing], [complete]);

fadeOut() annab elemendi opacity väärtuseks null ja display väärtuseks "none".

Funktsioon $("element").fadeTo()

Eelmistega sarnane, aga natukene parem. Nimelt saab fadeTo() funktsiooni kohandada kui palju elemendi nähtavust (opacityt) muudetakse.

fadeTo() funktsiooni saab defineerida kahel moel:

$("element").fadeTo(duration, opacity, [complete]);
$("element").fadeTo(duration, opacity, [easing], [complete]);

opacity on unikaalne parameeter ning tüübilt see on protsent (0.9, 0.35 jne). opacity tähendab fadeTo() funktsioonis seda, kui nähtavaks element tehakse.

Näiteks kui opacity on 0.5, siis fadeTo() animeerib elemendi nähtavause poole peale.

Kui duration parameeter on fadeTo() funktsioonis 0, siis jQuery lihtsalt muudab elemendi nähtavust (ilma animatsoonita)

Funktsioon $("element").fadeToggle()

Tegemist on funktsiooniga, mis kas animeerib elemendi sujuvalt sisse või välja, sõltuvalt nähtavusest.

Kui nähtavus on null ja display on "none", siis animeeritakse element sujuvalt sisse ja kui nähtavus on üks (protsendi mõistes sada) ja display midagi muud kui "none", siis animeeritakse element sujuvalt välja.

Funktsiooni fadeToggle() saab kirja panna kahel viisil:

$("element").fadeToggle([duration], [easing], [complete]);
$("element").fadeToggle([options]);

Efekti fadeToggle() näide:

Funktsioon $("element").slideDown()

slideDown() funktsioonis animeeritakse elemendi kõrgust. slideDown() töötab läbi CSSi omaduste display ja height.

Kui display on "none" ja elemendile lisatakse efekt slideDown(), siis jQuery animeerib elemendi nähtavaks muutes järk-järgult kõrgust suuremaks. Kõrgust lisatakse nii palju kui on lubatud ehk nii palju kui selle elemendi CSSis on kirjas.

slideDown() funktsiooni saab kirja panna järgmiselt:

$("element").slideDown([duration],[complete]);
$("element").slideDown([options]);
$("element").slideDown([duration], [easing], [complete]);

Funktsioon $("element").slideUp()

Nagu arvata võid, on see slideDown() vastand. Kui slideDown() muutis elemendi nähtavaks järk-järgult kõrgust kasvatades, siis slideUp() muudab elemendi nähtamatuks kõrgust järk-järgult vähendades.

Kui elemendil on olemas min-height omadus, siis animeeritakse elemendi kõrgus just sellele väärtusele, kuid kui seda ei ole olemas, siis animeeritakse kõrgus nullile.

display väärtuseks annab jQuery siinkohal "none".

Funktsiooni slideUp() saab kirja panna kolme moodi:

$("element").slideUp([duration],[complete]);
$("element").slideUp([options]);
$("element").slideUp([duration], [easing], [complete]);

Funktsioon $("element").slideToggle()

´slideToggle()´ muudab loomulikult elemendi nähtavaks läbi kõrguse vastavalt nähtavusest (põhimõttelt sama nagu ´fadeToggle()´ funktsioon).

Seda funktsiooni on võimalik defineerida järgmiselt:

$("element").slideToggle([duration],[complete]);
$("element").slideToggle([options]);
$("element").slideToggle([duration], [easing], [complete]);

Efekti slideToggle() näide:

jQuery efektide objekt fx

Kõiki animatsioone ja efekte reguleerib jQuery objekt fx. Läbi selle on võimalik mõjutada kõikide animatsioonide tööd.

Objektil fx on kaks tuntumat omadust, mida kasutatakse animatsioonide kontrollimiseks.

Omadus off

Tegemist on kahendloogika omadusega, mis määrab ära, kas jQuery peaks kasutama efekte ehk animatsioone.

Kui offile antakse tõene väärtus, siis jQuery ei animeeri ühtegi elementi (globaalselt on animatsioonid keelatud), kuid elemendile siiski antakse animatsiooni lõpptulemuse stiilid.

Lihtsamalt öeldes, off tõese väärtuse korral jätab jQuery animatsioonid lihtsalt vahele.

Loomulikult, kui off väärtuseks anda false, siis on animatsioonid uuesti lubatud.

$.fx.off = true || false;

Omadus speeds._default

speeds._default omadusega saab paika panna vaikimisi kestvuse kõikidele animatsioonidele.

Väärtuseks on tal arv, mis tähistab animatsioonide vaikimis kestvust millisekundites.

Out of the box jQuerys on vaikimisi animatsiooni pikkuseks 400 millisekundit (seda kasutatakse, siis kui animatsioonil ei ole kestvust ära märgitud), kuid tänu speeds._default omadusele saame seda muuta.

$.fx.speeds._default = 1000;
 

jQuery animatsioonidega ja efektidega seotud ajastusfunktsioonid ning muu

JavaScripti animatsiooni teeb CSSi omast paremaks ajastus. Ma ei mõtle siin all animatsioonide siseseid ajastusi, vaid ajastusi, millal animatsioone mängitakse (nt. veebilehe laadimisel, nupu vajutamisel jne).

Olgu, teatud ajastuskontroll on olemas ka CSSis, kuid see pole nii võimas kui JSi pakutav ajastus.

Praegu kui lisad veebilehte mitu animatsiooni, siis mängitakse need läbi ilusti järjekorras:

Seda on aga võimalik ka muuta.

 

Järgnevad ajastusfunktsioonid. Jällegi valikulised parameetrid on nurksulgudes [] ja juba tuttavaid argumente ma uuesti läbi rääkima ei hakka.

Ajastusfunktsioon $("element").delay()

Funktsiooni delay() eesmärgiks, nagu nimigi ütleb, on viivitada elemendi järgmist animatsiooni/efekti.

delay() pannakse kirja järgmiselt:

$("element").delay(duration, [queueName]);

Siinkohal unikaalne (ja valikuline) argument queueName tähistab animatsioonide järjekorra nime, kus viivitust rakendatakse. queueName vaikimisi väärtuseks on "fx", mis viitab jQuery üldisele animatsioonide järjekorda.

Näide delay funktsioonist:

Ajastusfunktsioon $("element").queue()

queue() eesmärgiks on, kas jälgida animatsioonide järjekorda või muuta seda.

queue() otstarbe sõltubki parameetrite arvust.

Kui kirjutad queue() funktsiooni järgmiselt:

$("element").queue([queueName]);

siis tagastab queue() järjekorra funktsioonid. Rohkemat ei tee queue() ühe parameetriga midagi.

Nagu näha on queueName uus parameeter ja selle väärtuseks võib anda eeldefineeritud järjekorra nime (tüübilt on tegemist sõnega). Kui queueName pole antud, siis kasutab jQuery fx üldist järjekorda.

Täiesti uue järjekorra loob arendaja options parameetris omadusega queue (kasutades väärtuseks sõne), mille ülesandeks oligi animatsioon lisada järjekorda või see sealt hoopis eemaldada. Kui sul ei tule millegipärast selline omadus meelde, siis vaata queue seletust ülevalt poolt 🙂 .

Kui aga queue() defineeirda järgmistel viisidel:

$("element").queue([queueName], newQueue);
$("element").queue([queueName], next);

siis on võimalik ka muuta praegust järjekorda.

Parameeter newQueue (tüübilt massiiv) asendab praguse järjekorra uue järjekorraga. Järjekorras võivad olla mitmesugused funktsioonid, kaasa arvatud animatsioonid.

Teisel võimalusel tähistab parameeter next tagasikutsumisfunktsiooni, millel on omakorda parameeter nextAnimation (ka tüübilt tagasikutsumisfunktsioon), mis esindab järgmist animatsiooni.

Kui next funktsiooni parameeter nextAnimation välja kutsuda, siis algab järjekorras järgmine animatsioon.

Funktsioon next kutsutakse välja, siis kui eelnev animatsioon järjekorras lõpetati.

Näide next tagasikutsumisfunktsioonist:

$("#animate-box-1")
    .animate({width: "100px"}, "slow") //Animeeri esimese kasti laiust
    .animate({height: "100px"}, "slow") //Animeeri esimese kasti kõrgust
    .queue(function(nextAnimation){ //Pääse ligi järjekorrale ja kui kõrguse animatsioon lõpeb kutsu anonüümne funktsioon välja
        //Parameeter nextAnimation tähistab järgmist animatsiooni ehk praegusel juhul esimese kasti viimast, opacity animatsiooni
        $("#animate-box-2").animate( //Animeeri teise kasti laiust
            {
                width: "100px"
            },
            {
                duration: "slow",
                complete: function(){ //Kui teise kasti animatsioon lõppeb
                    nextAnimation(); //kutsu välja parameeter (ja tagasikutsumisfunktsioon) nextAnimation, mis viitab esimese kasti viimasele animatsioonile
                    //Kui nextAnimationit ei kävitata, siis järgnev (opacity) animatsioon jääb mängimata
                }
            }
        );
    })
    .animate({opacity: 0.5}, "slow"); //Animeeri esimese kasti nähtavust ehk inglise keeles opacityt

Ajastusfunktsioon $("element").dequeue()

dequeue() käivitab järgmise järjekorras oleva animatsiooni antud elemendil. Kui funktsiooniga dequeue() välja kutsutud animatsioon on lõppenud, siis eemaldab dequeue() selle (dequeue – nimekirjast/järjekorrast eemaldama).

Arendaja poolt defineeritud (options parameetri omadusega queue) järjekorra peab käivitama dequeue() funktsiooniga.

Nimelt pannakse dequeue() kirja järgmiselt:

$("element").dequeue([queueName]);

Kui queueName argumenti ei saadeta, siis kasutab jQuery fx üldist järjekorda.

Puhta jQuery objekti peal see erilist tulemust ei anna (jQuery käivitab automaatselt fx järjekorras olevad animatsioonid), kuid kui kasutada dequeue() ilma parameetrita mingi animatsiooni/efekti järel, siis see käivitab koheselt (olenemata järjekorrast) järgmise animatsiooni ja lõpuks eemaldab selle.

Näide dequeue() funktsioonist (animatsioon käivitatakse koos dequeue() funktsiooniga):

Ajastusfunktsioon $("element").clearQueue()

Funktsiooni clearQueue() ülesanne on lihtne – eemaldada kogu järjekord.

Kui clearQueue() välja kutsutakse, siis käivitatakse kõik järjekorras olevad funktsioonid korraga (kaasa arvatud animatsioonid). Lõpuks eemaldab clearQueue() need järjekorrast.

clearQueue() saab kirja panna ainult ühte moodi:

$("element").clearQueue([queueName]);

queueName on sulle juba tuttav, ei hakka uuesti üle seletama (tähendab täpselt seda sama, mis kahel ülemisel funktsioonil)

Ajastusfunktsioon $("element").finish()

finish() funktsiooni ülesanne on ünsagi sarnane clearQueue() omaga, aga siiski on tal teatud erinevused.

Nagu nimest arvata võid on finish() funktsiooni ülesandeks animatsioonid (kuid mitte järjekorras olevad tavalised funktsioonid) lõpetada.

Kui finish() käivitatakse, siis kõik temale eelnenud animatsioonid viiakse automaatselt lõpuni.

Elemendi stiilis on olemas kõikide lõpetatud efektide lõpptulemused ehk lühidalt öeldes on element animatsioonid läbinud, kuid seda ei olnud kasutajale näha.

finish() defineeritakse järgmisel viisil:

$("element").finish([queueName]);

finish() näide:

$("#animate-box").animate({width: "100px"}, "slow");
$("#animate-box").animate({height: "100px"}, "slow");
$("#animate-box").finish(); //Kutsudes välja finish funktsiooni, hüppavad temale eelnenud animatsioonid lõppu, andes elemendile vastavad stiilid
$("#animate-box").animate({opacity: 0.5}, 1000);

//Siin oleks ka võimalik kasutada funktsioonide aheldamist - loe sellest altpoolt

Ajastusfunktsioon $("element").stop()

stop() on mõeldud just üksikanimatsioonide peatamiseks elemendil.

Kui stop() kutsutakse välja, siis peatatakse praegu mängiv animatsioon koheselt. Ühtegi tagasikutsumisfunktsiooni ei käivitata ja kui elemendil oli mitu animatsiooni, siis alustatakse järjekorras oleva järgmise animatsiooniga.

stop() funktsiooni käitumine sõltub suuresti ka parameetritest.

Iseenesest on võimalik stop() funktsiooni defineerida järgmiselt:

 $("element").stop([clearQueue], [jumpToEnd]);
 $("element").stop([queueName], [clearQueue], [jumpedToEnd]);

Kui kahendloogika parameeter clearQueue on tõene, siis lõpeatakse järjekorras edasised mitte animatsioonilised funktsioonid.

Kui jumpToEnd kahendloogika parameeter on tõene, siis lisatakse elemendile praeguse (ehk peatatud) animatsiooni lõppstiilid.

Funktsioon stop(true, true) on üsnagi sarnane finish() funktsiooniga, kuid finish() lisab kõik temale eelnenud järjekorras olevate animatsioonide stiilid elemendile.

Funktsioon $.speed()

Erinevatest teistest funktsioonidest ei käi see funktsioon ühegi jQuery objekti (ma mõtlen selle all jQuery HTML objekti) “külge”.

speed() on täiesti eraldi seisev funktsioon, mille ülesandeks on tagastada objekt, mida on võimalik kasutada omaduse options asemel. Rohkemat ta midagi ei teegi.

Erilist otstarbet pole see tavalises front-end veebiarenduses leidnud, kuid seda kasutatakse erinevate jQuery pluginate loomiseks, kus on olemas eritüüpi animatsioonid.

speed() funktsiooni on võimalik kirja panna järgmiselt:

$.speed([duration], [settings]);
$.speed([duration], [easing], [complete]);
$.speed([settings]);

Parameeter settings on väga sarnane options parameetriga, kuid settings objektil on ainult kolm võimalikku omadust: duration, easing ja complete, mis tähistavad seda sama, mida options objektis.

Esimeses mooduses jäetakse settings omadus duration välja, sest see on juba parameetriga duration defineeritud.

jQuery funktsioonid üksteise järel ehk funktsioonide aheldamine

Ma ei teagi, kas funktsioonide aheldamine on selle postituse teema või mitte, aga ma siiski toon selle üsnagi lühidalt välja.

Ei lasku siinkohal detailidesse, aga ma arvan, et kui sa ei tea, mis on funktsioonide aheldamine, siis sa saad vähemalt mingit aimu.

Funktsioone saab üksteise järel kirja panna

Jah, tõesti, funktsioone saab üksteise järel kirja panna.

See tähendab seda, et me ei kirjuta mitte $("element").funcA() ja $("element").funcB(), vaid me kirjutame $("element").funcA().funcB(). Sellist viisi nimetatakse funktsioonide aheldamiseks.

Kõik need järgnevad näited teevad ühte ja sama

$("element").fadeIn();
$("element").animate({width: "100px"});

//------------------------------------\\

$("element").fadeIn().animate({width: "100px"});

//------------------------------------\\

$("element")
    .fadeIn()
    .animate({width: "100px"});

Funktsioonide aheldamist kasutatakse tihti selleks, et muuta kood rohkem arusaadavamaks.

Eriti levinud on viimane näide, kus funktsioonid asuvad üksteise all.

Animeerimine värvidega

jQuery ise ei toeta värvide animeerimist, kuid see on võimalik saavutada läbi plugina jQuery Color.

Sellega on väga lihtne värve animeerida.

properties objekti tuleb lihtsalt lisada CSSi omadus, mille väärtuseks on värv või värvikood (nt. background-color, color jne). Loomulikult jQuerys kasutatakse background-color asemel backgroundColor.

Kõik stiilid, millel on sidekriips “-“, on soovitatav asendada camelCase moodusega.

Värvi omaduse väärtuseks võib olla värvikood (nt. #000) või saab väärtuse anda ka sõnades ja spetsiaalsetes värvifunktsioonides (rgba(), hsla(), "black" jne).

Värvide animeerimiseks tuleb kasutada animate() funktsiooni:

$("element").animate({backgroundColor: "#000"});
$("element").animate({color: "rgba(0, 0, 0, 0.5)"});
$("element").animate({borderColor: "blue"});

jQuery animatsioonilises veebiarenduses

jQuery mängib tegelikult väga suurt rolli (vähemalt praegu) animatsioonilises veebiarenduses ja seda mitte animatsioonide kohapealt, vaid just selle pealt, et jQueryt kasutavad väga paljud JavaScripti (animatsioonilised) teegid.

Nii et just oma funktstionaalsuse ja lihtsusega on jQuery ennast front-end ja ka veebianimatsiooni maailma sisse kirjutanud, kuid jQuery animatsiooni mootorit ei saa võrrelda CSSi ega puhta JavaScripti omaga. jQuery on aeglane.

jQuery animatsiooni mootor on aeglane, sest:

  • jQueryl ei ole ühtegi mehhanismi, mis ennetaks veebilehe sisu “prügistamist”
  • jQuery ei kasuta requestAnimationFrame funktsiooni, mis parandaks FPSi korralikult
  • jQuery pole mõeldud animeerimiseks

Allikas: Web Animation using JavaScript

Kui küsid, kumb on parem, kas jQuery või CSSi animatsioonid, siis mina vastaksin, et jQuery omad, sest olenemata jõudlusest on jQuerys suurem kontroll animatsioonide üle.

Nagu ka ennist ütlesin, on jQueryl väga palju animatsiooni pluginaid, mille jõudlus on tegelikult väga hea.

 

Ongi jQuery animatsioonidega kõik. Natukene pikk õpetus sai, aga ma arvan, et see oli seda väärt. Kavatsen teha veel eraldi õpetuse jQuery UI animatsioonide peale.


Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *