Animatsiooniline veebiarendus: jQuery Transit

Animatsiooniline veebiarendus: jQuery Transit

Kuna eelmine animatsiooniline õpetus oli puhtalt jQuery animatsioonide peale, siis võiks teha ka järgmise õpetuse jQueryga seoses.

Tänases postituses võtamegi ette jQuery plugina Transiti, mille jõudlus on ünsagi hea.

See sarnaneb väga palju animate() funktsiooniga, nii et kui osakd jQuerys animeerida, siis oskad ka siin.

Soojalt soovitaksin sul enne lugeda minu jQuery animeerimisõpetust, sest siin on kõik väga sarnane jQuery õpetusega ja ma ka sarnaseid kohti lahti ei seleta.

Abiks võib tänase postituse juures olla animatsioonilise veebiarenduse põhimõisted 🙂 .

jQuery Transit plugin

Transit plugina teeb väga eriliseks see fakt, et Transit kasutab animeerimiseks CSSi üleminekuid.

Selle tõttu on ka plugina animatsioonide jõudlus parem kui jQuery jõudlus.

Transitit saab ka kasutada lihtsalt CSSi lisamiseks (räägin sellest natukene allpool).

Transit transition

$("element").transition() on Transiti animeerimisfunktsioon ja seda pannakse kirja ainult järgmiselt:

$("element").transition(properties, [duration], [easing], [complete])

Nurksulgudes on parameetrid, mis ei ole kohustuslikud.

Parameeter properties

Siinkohal ma ei hakka seda uuesti lahti seletama, sest tegemist on täpselt selle sama parameetriga, mis oli jQuery animeerimisõpetuses, kuid ma toon siiski välja teatud erinevused, mis on jQuery ja Transiti properties objekti vahel.

Nimelt on Transiti properties jQuery omast parem, sest sellesse on lisatud mitmeid uusi võimalusi animeerimiseks.

Näideteks võib tuua värvid (jah, värvid on Transitis automaatselt toetatud) ning CSSi transformid (rotateX, rotate3d, skewX, skewY, perspective jne) – neid kõiki saab animeerida Transitis.

Sellest on ka Transit oma nimetuse saanud – Transit annab jQueryle erinevate transformide toetused.

Täpsema nimekirja toetatud omadustest leiad siit

Transiti properties kahjuks ei toeta "hide", "show" ja "toggle" väärtusi, kuid seda on kindlasti võimalik korvata mõninga JavaScripti koodireaga.

 

Veel, mis on eripärast Transiti properties objekti kohta on see, et mõningaid CSSi omadusi Transit ei animeeri. Nende asemel peaks kasutama alternatiive.

Soovitavalt ei tohiks Transitiga animeerida CSSi left ja right omadusi (jõudlus on halvem). Nende asemel tuleks kasutada Transiti enda omadust x, mis tähistab elemendi x koordinaati.

Sama toimub ka top ja bottom omadusega (nendele vastab Transiti omadus y).

Siiski on enamik omadusi originaalselt teotatud.

 

Võib olla, mis on kõige kummalisem Transiti juures on see, et properties objekti saab lisada ka animatsiooni sätteid ehk jQuery mõistes options objekti omadusi.

Siit allpool võid näha teisi parameetreid. Tegelikkuses ei pea neid esitama kui parameetritena, vaid saad need lisada kohe properties objekti.

Lisaks sellele saab properties objekti juurde anda ka omaduse delay, mida muidu Transitil esitatud pole.

Näide animeerimisest ainult properties objekti abil:

$("#animate-box-1").transition(
	{
		width: "200px", backgroundColor: "#96da71",
		delay: 500,
		duration: 1000,
		easing: "easeInOutBack",
		complete: function(){
			alert("Animatsioon lõppes");
		}
	}
);

properties on ainukene kohustuslik argument Transiti transition() funktsioonis.

Parameeter duration

Jällegi väga tuttav parameeter.

duration väärtuseks on tavaliselt arv ja see tähistab animatsiooni kestvust millisekundites.

Veel saab väärtust edasi anda sõnega nagu jQuerys ehk kas "slow" või "fast".

"slow" on 600 millisekundit ja "fast" on 200 millisekundit.

Kui kestvust ette ei anta, siis mängitakse animatsiooni vaikimisi väärtusega ehk 400 millisekundit.

Vaikimisi väärtust on võimalik muuta läbi jQuery fx objekti.

Parameeter easing

easing on animatsiooni siseajastus.

Erinevalt jQueryst toetab Transit väga palju siseajastusi.

Teotatud siseajastused on järgmsied: linear, ease, in, out, in-out, snap, easeOutCubic, easeInOutCubic, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, easeInQuad, easeOutQuad, easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInBack, easeOutBack, easeInOutBack

Nagu näed ei ole neid vähe.

Mingi ettekujutuse antud siseajastustest võid leida siit

Lisaks sellele saab defineerida ka enda poolt välja mõeldud siseajastusi kausatades Bézieri kurve.

$("element").transition(properties, 500, 'cubic-bezier(1.000, -0.600, 0.175, 1.525)');

Ma räägin allpool natukene rohkem siseajastuste defineerimisest.

Parameeter complete

complete on tagasikutsumisfunktsioon.

See kutsutakse välja, siis animatsioon on mängimise lõpetanud.

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

Näide Transiti animeerimisest:

$("element").transition(
	{
		width: "200px",
		backgroundColor: "#96da71"
	}, 
	1000, 
	"easeInOutBack", 
	function(){
		alert("Animatioon lõppes!");
	}
);

CSSi lisamine Transitiga ja animatsiooni omaduste väärtustest natukene täpsemalt

Transit pole ainult mõeldud animeerimiseks, vaid sellega saab ka lihtsustada CSSi transformide lisamist jQuerys.

Selle süntaks on nagu transition() funktsioonil, ainult ilma lisa atribuudieta.

Transit kasutab siinkohal ära jQuery $("element").css() funktsiooni.

Näiteks, kui soovin, et element oleks 30 pikslit vasakust äärest eemal ja tema laius oleks praegusest laiusest kaks korda suurem ning kõrgus 1.5 korda suurem, siis saab selle kirja panna järgmiselt:

$("element").css(
	{
		x: "30px",
		y: "25px",
		scale: [2, 1.5]
	}
);

Nagu näed on võimalik lisada ka mitu väärtust CSSi omadusele (vaata scale omadust). Seda saab teha ka animeerides.

Peale massiivi kasutamise, saab lisada mitu väärtust ka läbi sõne ("2, 1.5") ning lisaks sellele saab ka ära defineerida ühikud (nt. ["100px", "50px"]) kui CSSi omadus seda toetab.

NB! Mitu väärtust saab lisada ainult nendele CSSi omadustele, millel on lubatud kasutada mitut.

Loomulikult on toetatud ka suhtelised ("+=20px", "-=20px") suurused nii animeerides kui ka CSSi lisades.

Siseajastuste defineerimine

Transit lubab defineerida uusi siseajastusi.

Nagu varem mainitud sai, on üheks võimaluseks kasutada selleks Bézieri kurve.

$("element").transition(properties, 500, 'cubic-bezier(0,1,0.5,1.3)');

Olemas on ka teine variant. Nimelt saab lisada Transit globaalsesse objekti cssEase enda poolt defineerituid siseajastusi (koos Bézieri kurviga), et seda saaks pärast kasutada mitu korda.

See on imelihtne.

//Loome cssEase objekti uue siseajastuse
$.cssEase["bounce"] = "cubic-bezier(1.000, -0.600, 0.175, 1.525)";

//Kasutame seda uues animatsioonis
$("element").transition(
	{
		width: "200px",
		backgroundColor: "#96da71"
	}, 
	1000, 
	"bounce"
);

Toetus vanematele brauseritele

Kuna Transit kasutab animeerimiseks CSSi üleminekuid, siis selletõttu on vanemad brauserid toetamata – üleminekud lisati alles CSS3-e.

Selleks, et vanemates brauserites ka animatsioonid töötaksid tuleb luua fallback võimalus.

Õnneks ei ole see eriti keeruline:

if(!$.support.transition){ //Kui CSSi üleminekud ei ole toetatud, siis
  $.fn.transition = $.fn.animate; //muuda Transiti transition objekt jQuery animeerimisobjektiks
}

Nüüd on ka vanemad brauserid osaliselt toetatud.

Miks osaliselt?

Transit lisab tegelikkuses CSSi transformide toetuse jQuery css() ja animate() funktsioonile.

Ehk jQuery animate() saab ka animeerida CSSi transformide omadusi ning css() funktsioon omakorda suudab muuta elemendi transforme (rääkisin sellest rohkem üleval pool).

Vahe on aga selles, et Transiti transition() kasutab CSSi üleminekuid, aga jQuery animate() kasutab enda animatsiooni mootorit, mis on aeglane.

Veel võime leida erinevusi, et Transiti transition() toetab palju rohkem animeerimisvõimalusi – näiteks värvid ja erinevad siseajastused, mida jQuery ei teota.

Selleks, et ka vanemates brauserites oleksid sellised toetused olemas, siis tuleb kasutada jQuery pluginaid.

Värvide plugina leiad siit ja siseajastuste plugina siit.

Transit animatsioonilises veebiarenduses

Isiklikult ma ei saa mitte midagi halba öelda Transiti kohta – tegemist on hea pluginaga, mida saab kasutada animeerimiseks. Olen seda näiteks kasutanud enda firma, AnsiVeebi kodulehel.

Kuna Transiti kasutab JavaScripti ja tal on olemas nii siseajastuse kui välisajastuse kontroll (lisaks saab ka kasutada animatsioonide aheldamist ja järjekorda), siis on see üks korralik tööriist.

Ainult, et probleeme võib tekkida, siis kui animatsioonid on väga keerulised ja/või neid on palju.

Kui tundub, et Transit on aeglane, siis saab selle asemel kasutada velocityJSi.

Rääkides velocityJSi ja Transiti jõudlustest, siis lihtsamate animatsioonide korral on Transiti jõudlus vähekene parem (seda tõesti ei ole palju), kuid velocity teeb Transitile ära just mahurohkemates animatsioonides.

 

Ongi tänaseks kõik. Kas tekkis küsimusi/probleeme? Kui jah, siis anna kommenteerides teada 🙂 !


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 *