Category Archives: Animaatio

Animaatiot Androidissa

Helppo tapa tehdä applikaatiostasi hienompi on lisätä animaatioita. Käymme tässä läpi yksinkertaisia animaatioita ja niiden käyttämistä applikaatiossasi. Tässä esimerkissä keskitymme elementtien sijainnin muuttamiseen animaatioilla.

Animaatioita voi tehdä kahdella tavalla. Joko suoraan koodissa, tai määritellä erikseen xml:ssä. Jos animaatiossa ei tarvitse laskea suoritusaikana mitään tulisi ne tehdä xml:ssä, että koodi on selkeämpää.

Voit ladata esimerkin lähdekoodin täältä.

Animaatio koodissa

Animaation luominen koodissa on hyvin suoraviivaista. Uusi animaatio olio luodaan halutunlaisesta animaatiotyypistä. Tässä tapauksessa:

TranslateAnimation (int fromXType, float fromXValue,
                    int toXType, float toXValue,
                    int fromYType, float fromYValue,
                    int toYType, float toYValue)

Type attribuutit kertovat onko animoitava matka absoluuttinen vai suhteellinen. Suhteellinen matka voi riippua joko itse animoitavasta näkymästä, tai sen vanhemmasta:

Animation.ABSOLUTE
Animation.RELATIVE_TO_SELF
Animation.RELATIVE_TO_PARENT

Koodissa olen käyttänyt absoluuttista siirtymätyyppiä, sillä haluan animoida valikon liikkumisen vain piiloon jäävältä osiolta, jonka olen asettanut 100dp:ksi. Huomaa että koodissa täytyy ottaa huomioon dp:t, eli näytön tiheydestä riippumattomat pikselit. Näytön tiheyden saat:

float scale = getResources().getDisplayMetrics().density;

Koska absoluuttisia siirtoja ei voi ilmoittaa dp:nä on annetut dp:t kerrottava näytön tiheydellä, jotta saat dp:n arvon pikseleinä.

Animaatiolle tulee asettaa kesto, minkä aikana animaatio suoriutuu loppuun. Kesto annetaan millisekuntteina.

animation.setDuration(500);

Animaation loputtua liikutettu näkymä ei suoraan jää sille asetettuun paikkaan, vaan sen paikka täytyy asettaa koodissa ja vasta, kun animaatio on päättynyt. Muuten kuva hyppää asettamaasi paikkaan suoraan.

Huomaa:

Huomaa, että animaatio lähtee aina animoidun näkymän sen hetkisestä asemasta. Aseman pystyy muuttamaan myös automaattisesti:

animation.setFillEnabled(true);
animation.setFillAfter(true);

Tätä tapaa voi käyttää sekä koodissa, että xml:ssä, mutta jos kuvasi reagoi painalluksiin sen oikea paikka on edelleen siellä, missä se on xml layoutissa asetettu. Eli kuvan tai napin paikka on oikeasti eri, kuin missä se näyttäisi olevan. Tästä syystä tätä tapaa ei voi käyttää tässä esimerkissä. Jos esimerkiksi valikossa olisi nappula se kyllä tulisi näkyviin, mutta sen painalluksen tunnistava osuus olisi edelleen näytön ulkopuolella, eikä nappulaa näin voisi painaa.

Lopuksi animaatio käynnistetään sille näkymälle, mitä halutaan liikuttaa:

slider.startAnimation(animation);

Animaatio XML:ssä

Animaatioiden määrittäminen XML:ssä on melko suoraviivaista. Tarvittavat ohjeet ja listat mahdollisista elementeistä löytyvät Googlen Android developer-sivustolta.

Animaatiot tallennetaan applikaatiosi resurssi kansioon res/anim/animaation_nimi.xml. Animaatio voi sisältää useita animaatioita, kuten liikkumista ja koon muutosta. Nämä animaatiot tulee asettaa <set>-elementin sisälle. Jos animaatiosi koostuu vain yhdestä osasta ei <set>-elementin käyttäminen ole pakollista. Yllä olevasta linkistä löytyy mahdolliset animaatiotyypit ja niiden parametrit.

Tähän esimerkkiin tein yksinkertaisen siirtymisanimaation, missä kuva tulee näytön vasemmasta laidasta sisään. Animaatiolle on asetettu kesto, lähtöpaikka ja lopullinen paikka. Tässä tapauksessa kuva on koko näytön kokoinen ja aloittaa -100%:sta ja siirtyy normaaliin paikkaansa. X-akselin negatiiviset arvot ovat ruudun vasemmalla puolella ja positiiviset oikealla puolella.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:duration="500"
   android:fromXDelta="-100%"
   android:toXDelta="0"
   android:fillEnabled="true"
   android:fillAfter="true"
   />

Animaatio ladataan koodissa:

Animation slideFromLeft = AnimationUtils.loadAnimation(this, R.anim.slide_in_from_left);

Muista asettaa animoitu näkymä näkyväksi, ennen kuin aloitat animaation, jos näkymän näkyvyys on poissa. Tai jos viet näkymää pois ruudulta aseta näkymä pois animaation jälkeen. Muuten animaatio aloitetaan samalla tavalla, kuin koodiesimerkissä.

Vinkki

Mukava tapa sulkea valikoita, jotka eivät peitä koko näyttöä on tehdä tyhjän osan peittävä näkymä, jota painamalla valikko menee kiinni. Tässä esimerkissä teemme slidecontainer:ssä FrameLayoutin nimeltä hider, joka tekee saman asian, kuin välilehden painaminen. Kun valikko on ylhäällä piilotamme hiderin, niin ettei sitä pysty painamaan. Tämä lisää valikon käytettävyyttä.

Valikot olisi myös hyvä toteuttaa omina aktiviteetteinään, mutta tässä esimerkissä näin ei voi tehdä, sillä valikon alareuna on osittain näkyvissä koko ajan. Aktiviteetti voi olla vain osittain toisen päällä, mutta alempaa aktiviteettiä ei voi käyttää.