Jabolko je lahko en trenutek na veji in že naslednji trenutek na tleh. Noč lahko v trenutku preide v dan brez vmesnih prekrasnih prizorov. In ne samo, da je to v računalniku mogoče, takšno obnašanje je celo privzeto, saj vsi podatki v računalniku izhajajo iz bitnih vrednosti 0 in 1. Ni pa treba, da je tako, če v svoje aplikacije uvedemo animacije. Gumbi se lahko odzovejo na naš dotik, okna se lahko ne le prikažejo, ampak zrastejo v želeno velikost, puščica se lahko obrne, ne le preslika ipd.

Android, tako kot tudi drugi programski jeziki, podpira animacije. Nekaj animacij ima že vnaprej definiranih, če z njimi nismo zadovoljni, pa lahko ustvarimo svoje.

Osnovno gibanje

Obstoječe animacije v sistemu Android SDK najdemo v paketu android.view.animation in so naslednje:
- AlphaAnimation – spreminjanje prozornosti,
- AnimationSet – združitev več animacij hkrati,
- RotateAnimation – vrtenje okrog določene osi,
- ScaleAnimation – razširitev elementa,
- TranslateAnimation – premik v vodoravni ali navpični smeri.

Najpreprostejši in tudi najčistejši način za animiranje objektov je, da ustvarimo novo xml datoteko v mapi res/anim. Vanjo v obliki xml zapisa zapišemo pravila za animacijo.

Pa si poglejmo kar konkreten primer. Recimo, da želimo s pritiskom na gumb tega premakniti v desno za 100 točk. Za to ustvarimo datoteko res/anim/translate.xml in vanjo zapišimo naslednje:

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100"
android:fromYDelta="0"
android:toYDelta="0"
android:duration="1000"
android:fillAfter="true"/>

S tem je na enem mestu definirana animacija premika za 100 točk v desno in 0 v navpični smeri, ki bo trajala 1 sekundo (1000 ms). Privzeto se animacija po koncu vrne na začetno stanje, česar pa običajno ne želimo, zato dodamo parameter fillAfter="false".

Kot smo se že naučili v prejšnjih delih naše šole, so vse vizualne komponente aplikacije podrazredi razreda View, kar tudi pomeni, da animiramo le te komponente. Zato ima sistem Android priročno metodo na razredu View, ki sproži animacijo za vse grafične elemente, tudi tiste, ki jih ustvarimo sami, če jih le pravilno implementiramo. Za naš primer bomo animacijo pognali kar na gumbu:

Button button = (Button) findViewById(R.id.button);
button.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation translation = AnimationUtils.loadAnimation(context, R.anim.translate);
view.startAnimation(translation);
}
});

To je to – ta koda že požene animacijo na gumbu, če pritisnemo nanj.

Preostale tipe animacij sprožimo podobno. Nekateri parametri so skupni (duration, fillAfter, startOffset …), preostali pa so razloženi v okvirčku.


Napredne možnosti
Isto animacijo lahko napravimo tudi tako, da animacijo definiramo neposredno v kodi. S tem koda ni več tako čista in pregledna, imamo pa tako več možnosti za določanje oziroma spreminjanje animacije v odvisnosti od vhodnih podatkov. Poglejmo si, kako bi programersko ustvarili enako animacijo kot prej.

Najprej ustvarimo instanco animacije TranslateAnimation, ki bo premaknila dotični element za 100 dp v desno.

Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation translation = new TranslateAnimation(0f, 100f, 0f, 0f);
translation.setDuration(1000);
translation.setReturn(false);
view.startAnimation(translation);
}
});

Tudi druge animacije poganjamo analogno, le parametri konstruktorja so specifični, a so analogni parametrom ustreznih značk v xml-ju, kot so opisani v okvirčku.

text image

Lastne animacije

Če pa te animacije ne zadostijo našim potrebam, lahko ustvarimo tudi svoje. Za to moramo razširiti razred Animation in implementirati metodo applyTransformation(float interpolatedTime, Transformation t). Parameter interpolatedTime je realno število med 0 in 1 in si ga lahko predstavljamo kot čas animacije. 0 pomeni začetek animacije, 1 pa konec. Naša naloga je torej, da za vse vrednosti med 0 in 1 povemo, kako naj je videti naša animirana komponenta. Parameter t pa predstavlja dejansko transformacijo komponente v nekem trenutku, ki je odvisna od prvega parametra. Transformacija je shranjena v obliki matrike.

Če bi na primer želeli ustvariti animacijo, kjer se gumb zatrese in potem počasi umiri, bi to bilo videti tako:

public class ShakeAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float dx = 500 * (float) (Math.sin(interpolatedTime * Math.PI * 6) * (1 - interpolatedTime));
t.getMatrix().setTranslate(dx, 0);
}
};

Spremenljivka dx predstavlja premik v smeri x. Ko jo imamo izračunano, jo samo še vstavimo v matriko kot premik.

Animacijo nato konstruiramo (brez parametra) in jo nato poženemo enako kot vse preostale.

Nadzor hitrosti

Kdor želi storiti še korak naprej v prilagajanju animacij, si lahko pogleda še interpolatorje – ti določajo, kako hitro se animacija izvaja v določenem trenutku. Lahko je na primer na začetku počasna, potem pa čedalje hitrejša (kar ustvari občutek upora v primeru premikanja), lahko je počasna na koncu, lahko gre malo tudi v nasprotno smer (in s tem oponaša odboj) itd. Tudi interpolatorji so v paketu android.view.animation, prav tako pa lahko napišemo svoje, če želimo.

Lollipop

Pravkar na novejše naprave prihaja zadnja različica sistema Android, imenovana Lollipop. S to želi Google vzpodbuditi še bolj pomensko polne animacije, ki ne bi bile namenjene zgolj zabavi, ampak tudi boljšemu razumevanju dogajanja na zaslonu. Animacije, ki se sprožijo s pritiskom, bi naj izvirale točno iz mesta pritiska (če želimo na primer obarvati gumb ob pritisku, naj bi se nova barva razlila od mesta pritiska navzven), če se prikaže novo okno, ki ohrani kakšne komponente, naj bi se te premaknile na novo mesto, in ne izginile ter prikazale nazaj (na primer če v seznamu stikov odpremo podrobnosti posameznega stika, naj bi se fotografija osebe le prestavila na pravo mesto in morda povečala) ipd. Skratka, ni dovolj, da se vprašamo, kako bi nekaj animirali, temveč tudi, kaj hočemo z animacijo sporočiti. Več o tem si lahko preberete v obširni Googlovi dokumentaciji na to temo http://goo.gl/KSKUM3.

Zaključek

Animacije niso nujen del aplikacij, so pa zelo dobrodošel, saj zelo pritegnejo našo pozornost. To je lahko dvorezen meč – preveč animacij lahko hitro zmede uporabnika, da se ne znajde več na ekranu. A če jih postavimo na pravo mesto in poženemo v pravem trenutku, bomo uporabnike prepričali, da je naša aplikacija živa.

5/6

Moj mikro Januar Februar 2015 | Rok Končina |