Po 2 týždňoch som sa rozhodol napísať tento príspevok. Teraz počas maturít nemám veľa času na testovanie, ale myslím si, že toto je skutočne zaujímavá téma. Väčšina z nás doteraz pravdepodobne animovala prvky pomocou JavaScriptu. Dnes vieme urobiť jednoduché animácie aj pomocou CSS a v niektorých prípadoch sú mimoriadne efektívne.
Ako to funguje?
Animácie v JavaScripte robím pomocou frameworku jQuery. Je to veľmi jednoduché. Najskôr vyberiete prvok, ktorý chcete animovať, potom poviete čo sa má animovať a nakoniec ako dlho to potrvá. Ukážme si príklad kde budem animovať výšku:
<style> #mydiv { height: 50px; width: 50px; border: 1px solid blue; } </style>
<div id="mydiv"></div>
<script> $("#mydiv").animate({height:"400px"}, 500); </script>
Nakoniec ešte môžeme pridať ‘easing’ a teda spôsob prelínania. V základe sú len dva easingy a pre viac je potrebné používať plugin. Teraz skúsim vysvetliť princíp CSS3 animácie. Animácia nastáva pri zmene vlastnosti. Zmena vlastnosti môže nastať buď prejdením myšou ponad objekt, JavaScriptom alebo nejakým iným eventom. Bolo by zaujímavé zisťovať, čo všetko sa dá spraviť. Ukážme si nejaký príklad:
<style>
#mydiv
{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
height: 50px;
width: 50px;
border: 1px solid blue;
}
#mydiv:hover
{
height: 100px;
}
</style>
<div id="mydiv"></div>
Trošku dlhší zápis, avšak výsledok je perfektný. Keď prejdeme myšou ponad objekt spustí sa animácia, pri ktorej sa nám zanimuje výšku. Čo sme ale vlastne napísali? Prvý parameter je vlasnosť, ktorá sa animuje, v predĺženom zápise to je -webkit-transition-property. Ja som dal all a teda všetky vlastnosti, ale mohol som napísať len height. Takto môžete vytvárať rôzne animácie rôznych vlastností (urobíte sekundovú animáciu pre výšku, dvojsekundovú pre šírku). Pre zápis viacerých vlastností používajte čiarku.
Druhý parameter je dĺžka animácie. Udáva sa v sekundách, záporné hodnoty sú neplatné a defaultná hodnota je 0. Predĺžený zápis je -webkit-transition-duration. Teraz prichádza finta:
-webkit-transition-property: height, width; -webkit-transition-duration: 0.5s, 2s;
Tento zápis spôsobí, že výška sa bude animovať pol sekundy a šírka 2 sekundy. Posledný parameter je spôsob animácie. Možnosti sú nasledovné:
- linear – rovnomerný pohyb
- ease-in – má zrýchlenie na začiatku
- ease-out – má spomalenie na konci
- ease-in-out – má zrýchlenie na začiatku a spomalenie na konci
- cubic-bezier – je opísanie pohybu pomocou beziérovej krivky. Odporúčam využívať http://cubic-bezier.com
Výhody CSS
Za jednu z najväčších výhod CSS animácie je, že môžete animovať prakticky čokoľvek veľmi jednoducho. To neplatí pri JS animácií. jQuery v základe nedokáže animovať farby. To isté platí aj o tieňoch (a môžete naraziť aj na iné vlastnosti). Takže napísanie animácie mocou CSS je oveľa jednoduchšie. Druhá výhoda je, že si môžete nastaviť svoj vlastný easing. Určite sa to bude dať urobiť v jQuery, ale ešte som sa v tom veľmi nehrabal. Určite to však nebude také jednoduché ako v CSS. Poslednou výhodou je kratší zápis.
Príklad
Nakoniec by som chcel ukázať jeden príklad. Podľa mňa je to vynikajúci nápad a vlastne kvôli nemu som sa začal CSS animáciami venovať. Vytváram knižnicu na uploadovanie obrázkov. Ako však dať užívateľovi vedieť, že sa obrázok načítava a pritom nerobiť to štandardným koliečkom? Napadlo ma animovať oranžový “tieň”. Naprogramoval som JS riešenie, avšak musím používať externé knižnice na farby (skúšal som aj meniť farbu tieňa) a knižnicu na animovanie tieňa. Tu je ukázaný princíp, je to dosť zjednodušené. Využívam 4 kroky, ale v praxi sa mi viac páči riešenie s 8 krokmi a menším tieňom. Chcem však ukázať na kontrast medzi CSS a JS riešením, preto aj tento príklad využite viac na inšpiráciu než na hotové riešenie.
<style type="text/css">
div
{
width: 100px;
height: 100px;
}
</style>
<div></div>
<button id="btn-1"> Start </button>
<button id="btn-2"> Stop </button>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><!-- jQUery -->
<script type="text/javascript" src="http://www.bitstorm.org/jquery/shadow-animation/jquery.animate-shadow-min.js"></script><!-- Animovanie tieňa: box-shadow -->
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script><!-- Easing funkcie -->
<script type="text/javascript">
var interval;
var time = 1000;
var i = 1;
$('#btn-1').click( function()
{
interval = setInterval( 'animateShadow()', time );
});
$('#btn-2').click( function()
{
clearInterval( interval );
$('div').animate( { boxShadow: 'none' }, time*3, 'easeInOutExpo' );
});
function animateShadow()
{
switch ( i )
{
case 1:
shadow = '0px -10px 15px';
break;
case 2:
shadow = '10px 0 15px';
break;
case 3:
shadow = '0 10px 15px';
break;
case 4:
shadow = '-10px 0 15px';
i = 0;
break;
}
shadow += ' #ffa500';
$('div').animate( { boxShadow: shadow}, time );
i++;
}
</script>
Zhruba to isté v CSS verzií vyzerá takto:
<style type="text/css">
@-webkit-keyframes slider {
0% { box-shadow: 0 -10px 15px orange; }
25% { box-shadow: 10px 0 15px orange; }
50% { box-shadow: 0px 10px 15px orange; }
75% { box-shadow: -10px 0 15px orange; }
100% { box-shadow: 0 -10px 15px orange; }
}
div
{
width : 100px;
height : 100px;
margin-left: 100px;
float: left;
border: 1px solid green;
}
.anim
{
-webkit-animation: slider 5s infinite normal cubic-bezier(.3,.56,.46,.71);
}
</style>
<div id="id-1"></div>
<button id="btn-1">Start</button>
<button id="btn-2">Stop</button>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$("#btn-1").click( function(){ $("#id-1").addClass('anim'); } );
$("#btn-2").click( function(){ $("#id-1").removeClass('anim'); } );
</script>
Môžete si všimnúť ešte aj -webkit-keyframes a animácie. Ak by som chcel podporu Mozilly musel by som napísať @-moz-keyframes, pre Operu by to bolo -o- a pre IE -ms-.
Viac informácií
Ak vás táto téma zaujala viac informácií nájdete na:
- http://www.webkit.org/blog/138/css-animation/
- http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
- http://css3.bradshawenterprises.com/
Záver
Animovanie pomocou CSS3 je podľa mňa veľmi zaujímavá možnosť. Nepodporuje to iba IE (i keď od 10 by mal), ale predstavuje jednoduchší, prehľadnejší a krajší zápis. Pekné na tom je, že animujeme priamo v jazyku v ktorom design vytvárame. Dúfam, že som vám týmto článkom spravil chuť a teším sa opäť o “týždeň” (veľmi mi to nevychádza, keďže maturujem).
