spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 27.11.2011
Hodnoť článok:
0 0

CSS3: Čas na animáciu?

Vždy keď sa stretnete s niečím, čo Vás môže obohatiť, premýšlate, či to skutočne zvládnete, alebo nie. Ja som človek, čo si rád zašomre, bo sa mu nechce, ale nakoniec mi to nedá a skúšam hľadať riešenia. Čo sa mi prihodilo? Prerábal som banner z flash-u do CSS3. Fuuu. A ako?

Skúste si to predstaviť. Dostanete SWF súbor v ktorom je (našťastie) jednoduchá animácia. Nejaké tie posuny textu plus efekt typu fade-in a fade-out. Viacmenej nejaké 4 textové slajdy. Prvé čo mi napadlo bolo, že určite existuje niečo, čo by vedelo prekonvertovať SWF do HTML, no nie? A tak som - ako správny neťák - guuuglil. Narazil som priamo na nástroj, ktorý vytvorili v Google Labs - Swiffy [Swiffy na gLabs]. Nahráte Vaše swf a čakáte, čo to "vypluje". V mojom prípade, nakoľko boli použité embedované fonty (nie klasické), animácia síce bola pekná, no bez fontu, ktorý by som potreboval. Čo teda ďalej? Ako to riešiť?

CSS3 a jQuery?

Áno. Prvá vec, čo mi napadla bolo CSS3 kôli @font-face. Nakoľko ak idete robiť banner, ktorý má byť hlavne pre mobilné zariadenia, musíte myslieť hlavne na jeho veľkosť. Viem, asi sa pýtate sami seba, či pri použití @font-face sa dá hovoriť o optimalizácii, ale verte či nie, áno, dá. Dôvod? Každý prehliadač si stiahne len ten typ fontu, ktorý potrebuje pre správne renderovanie. (Aspoň by to tak malo byť). A čo rozhodovanie o tom, akú animáciu voliť? Máme dva spôsoby, ako môžeme takýto banner animovať.

Animovať pomocou jQuery .animate()

To bola moja prvá voľba. Samozrejme, že keď som to odovzdal, klient mi to poslal späť aby som opravil HTML a prerobil to na úplnú CSS3 animáciu. Údaje, čo prehliadače, ktoré nepodporujú Javascript?! Trošku som sa zasmial, pretože ak nepodporujú JavaScript, tak CSS3 nevyrieši reštartovanie animácie a dokonca ani prvotné overenie toho, či prehliadač podporuje verziu pre javascript, alebo sa použije CSS3 verzia animácie, ale budiš.

Ak nepoznáte funkciu .animate(), tak si ju trošku osviežme, alebo s o nej čo-to povedzme. Vlastnosti sú nasledovné.

.animate( vlastnosti [, dĺžka travnia] [, animácia] [, dokončenie animácie] )

Pre príklad použitia si môžeme spraviť jeden div - najlepšie taký, čo potom aj využijeme. Volajme ho BANNER -

. Prostredníctvom funkcie animate pridáme vlastnosti a určíme, ako dlho sa animácia má vykonávať.

$('#banner').animate({
width: '468', // nastavíme šírku na 468 px
height: '60', // nastavíme výšku na 60 px

// animácia bude trvať 3 sekundy
} , 3000, function() {
 // tu je animácia dokončená...
});

Ako by sme animovali takúto vec pomocou CSS3?
Aby sme si uvedomili, čo sme vôbec robili, tak si povedzme, že ide o tzv. resize elementu. Z toho dôvodu aj nasledovný kód, ktorý si vysvetlíme.

@keyframes resize {
	0% {
		width: 0;
                height: 0;
	}
	50% {
		width: 60px;
		height: 468px;
		background-color:rgba(255,0,0,0.2);
	}
	100% {
		width: 468px;
		height: 60px;
		background-color:rgba(255,0,0,0.9);
	}
}

#banner {
	animation-name: resize;
	animation-duration: 1s;
	animation-iteration-count: 4;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

Hneď v úvode máte možnosť vidieť @keyframes resize. Čo nám to hovorí? Áno ak myslíte na určovanie kľúčových snímok. Ako máte možnosť vidieť, nazvali sme celú tú kľúčovaciu animáciu ako "resize". Je to veľmi dôležité vedieť, nakoľko sa na tú animáciu budeme odkazovať pri určení elementu, na ktorý chceme animáciu použiť. Presnejšie hovorím o deklarácii: animation-name: resize;. Ako vidíte, to "resize" môže byť nahradené čímkoľvek, podľa toho, ako si animáciu nazvete.

Ako rozpohybovať texty?

Ako vidíte vo vyššie uvedenom zápise @keyframes, určujú sa tam percentuálne hodnoty. Ide o vyjadrenie pozície animácie. Ak si vezmeme, že určujeme dĺžku animácie v milisekundách, alebo v sekundách, pri animácii trvajúcej 5 sekúnd, je 50% zápis presne 2.5 sekundy. Matematiku zvládneme všetci, takže myslím, že objasňovať ju netreba. Skôr si poďme povedať o pár základných veciach, ktoré už poznáme z iných CSS zápisov. Aby prehliadače vedeli, o čo ide, musíme používať aj zápis typu @-moz-keyframes, @-webkit-... @-ms-... či @-o- (pre operu). Pre reálny príklad si poďme spraviť jednduchú animáciu textu, kde potrebujeme, aby sa text zväčšil a spravil fade-in. Ako by sme to zapísali?

@keyframes text {
    0% {
      font-size: 20px;
      top: 10px;
      opacity: 0;
    }
    15% {
      font-size: 26px;
      opacity: 1;
      top: 6px;
    }
    75% {
      font-size: 26px;
      opacity: 1;
      top: 6px;
    }
    100% {
      font-size: 20px;
      opacity: 0;
      top: 10px;
    }
}

Ako vidíte, je to opäť len @keyframes bez @-moz- či @-webkit-. Nakoľko natívny spôsob:

@-moz-keyframes text,
@-webkit-keyframes text,
@keyframes text

NEFUNGUJE, je nutné, aby sa vyššie uvedený zápis zopakoval pre každú entitu. Ako môžete vidieť, zápis v keyframes určuje, že na začiatku bude text s nulovou opacitou, bude mať 20 pixelov. V 15% sa text zväčší na 26 pixelov a zviditeľní sa (opacita 100%). Následne tak bude až do 75%, kedy sa do 100% opäť vráti do pôvodných rozmerov a vlastností ako tomu bolo na začiatku. Aby sme našu animáciu spustili, potrebujeme určiť element, na ktorý bude animácia aplikovaná.

#banner p {
	animation-name: text;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	-moz-animation-name: text;
	-moz-animation-duration: 5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-timing-function: ease-in-out;
	-webkit-animation-name: text;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
}

Spojme si to dokopy

Súbor na ukážkuPripravil som pre Vás jedno skúšobné html, pomocou ktorého si môžete pozrieť funkčnosť toho, čo je písané v tomto článku.

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
0 0

8 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 rony spravodaj 29.11.2011 18:27:43
poklona...
0 0 František Čaník 28.11.2011 09:06:03
@All: A o to viac si viete predstavit moje nadsenie, ked som musel prerabat inak plynulu animaciu z FLASH-u a aj to len z toho titulu, ze na touch zariadeniach od jablcka flash nefici :)
0 0 Tomas Misura 28.11.2011 00:37:23
To je sice peknem,ze v CSS3 sa daju robit pekne animacie, ale iba za predpokladu, ze vsetcia pouzivaju Gecko alebo Webkit. CSS3 je na IE utrpenie....
0 0 viťo 27.11.2011 12:49:10
Moj osobny nazor je, ze CSS3 animacie su hlavne preto, aby sa nemuselo pouzivat jquery.. jquery+css je vlastne akysi mix neviemcoho.. pekne css3 animacie (od jednoduchych, az po niekolko minutove) sa daju robit cisto len css3.
0 0 Vladimir Modrooký Diablik 27.11.2011 12:12:43
Ja viem asi prečo to nefunguje lebo po prefixoch -moz, -ms, -o či -webkit by mala nasledovať property bez prefixu, lebo novšie prehliadače už nebudú používať prefix a tak nám box-shadow bude chýbať a františek to ma prave naopak.
0 0 Ernest Sawyer 27.11.2011 11:59:26
nuž, jediný problém je tu zatiaľ podpora takýchto pokročilejších css3 funkcií v realite prehliadačov.
0 0 Miroslav Paganík 27.11.2011 10:34:43
mne funguje [FF8]
0 0 Stylo.sk 27.11.2011 09:55:23
Pekný článok, no ten súbor na ukážku nefunguje...
Zajtra.sk > Programovanie > CSS/HTML > CSS3: Čas na animáciu?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama