Image
30.6.2016 0 Comments

Vývoj pre Android – Animácia / 12. časť

Späť na úvod >> Späť na seriál

Animácia umožňuje meniť grafický objekt, konkrétne parametre vykresľovania, napríklad veľkosť, farbu, priehľadnosť, umiestnenie, orientáciu a podobne. Zmeny sa vykonávajú dynamicky, postupne v závislosti od času. Android poskytuje niekoľko rôznych metód animácie, implementovaných ako triedy.

Prakticky od prvých verzií API Android podporuje jednoduché animácie, ktoré možno aplikovať len na objekty, ktoré sú potomkami triedy View:

  • TransitionDrawable - animácia prechodu medzi dvoma zobrazeniami; realizuje sa postupným stmievaním prvého a postupným rozjasňovaním druhého zobrazenia
  • AnimationDrawable - animácia pomocou rýchleho zobrazovania série obrázkov
  • TweenAnimation - vytváranie animácie zmenou parametrov zobrazenia

Animácia TransitionDrawable

V príklade využijeme rovnaké objekty ako v príklade na vykresľovanie základných grafických tvarov, teda dva obdĺžniky definované v súboroch XML rect1.xml a rect2.xml, umiestnených v zložke drawable.

Uvádzame len obsah definičného súboru prvého obdĺžnika, druhý sa líši len farbou plochy obdĺžnika #ff00ff.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#0000ff" />
</shape>

Prechod medzi zobrazeniami je definovaný v súbore transformacia.xml:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/rect1"
android:right="100dp"/>
<item android:drawable="@drawable/rect2"
android:left="100dp"/>
</transition>

V definičnom súbore XML hlavnej aktivity vložíme grafické prvky do layoutu ako ImageView. Animácia v trvaní dvoch sekúnd je vytvorená a spustená v kóde hlavnej aktivity. V metóde onCreate sa načíta definičný súbor transformácie

shape_transition.xml.
public class MainActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TransitionDrawable transition = (TransitionDrawable) getResources()
.getDrawable(R.drawable.transformacia);
transition.setCrossFadeEnabled(true);
((ImageView) findViewById(R.id.image_view)).setImageDrawable(transition);
transition.startTransition(2000);
}
}

Po spustení aplikácie sa vľavo zobrazí modrý obdĺžnik, ktorý postupne mizne, a naopak, vpravo sa začína zobrazovať fialový obdĺžnik.

Animácia AnimationDrawable

AnimationDrawable zobrazuje postupne sériu drawables objektov, pričom každý z objektov sa zobrazuje v stanovenom čase. Táto metóda animácie sa najviac podobá tvorbe klasických animovaných filmov, ktoré sa skladali z jednotlivých obrázkov premietaných v rýchlom slede.

Princíp snímkovej animácie

Obrázky pre váš príklad môžete nájsť na webe alebo si ich môžete nafotiť či nakresliť.

Uložte snímky, ktoré budú tvoriť animáciu, do adresára drawable. V súbore animacia.xml v zložke drawable je definícia priebehu animácie. Každá snímka tvoriaca animáciu bude zobrazená po dobu 300 milisekúnd (výpis je skrátený).

<animation-list android:oneshot="true" >
<item
android:drawable="@drawable/anim1"
android:duration="300"/>
...
android:drawable="@drawable/anim7"
android:duration="300"/>
</animation-list>
V layoute hlavnej aktivity je prvok ImageView na zobrazenie animácie ako série obrázkov.
Kód hlavnej aktivity:
public class MainActivity extends Activity
{
private AnimationDrawable anim;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = (ImageView)
findViewById(R.id.animovany_obrazok);
imageView.setBackgroundResource(R.drawable.animacia);
anim = (AnimationDrawable) imageView.getBackground();
}
@Override
protected void onPause()
{
super.onPause();
if (anim.isRunning()) anim.stop();
}
@Override
public void onWindowFocusChanged(boolean hasFocus)
{
super.onWindowFocusChanged(hasFocus);
if (hasFocus) anim.start();
}
}

Príklad animácie Tween

Animácia tohto typu umožňuje zobraziť ImageView a animovať jednu alebo niekoľko jeho vlastností súčasne. Na príklade grafického objektu budeme demonštrovať jeho postupné znižovanie priesvitnosti, ktoré vizuálne pôsobí, ako keby sa obrázok postupne vynoril z pozadia, následne ukážeme pohyb objektu, zmenu jeho veľkosti a sériu animácie ukončí miznutie objektu, teda zvyšovanie priesvitnosti. Budeme meniť aj tempo časového priebehu animácie.

V kóde XML layoutu hlavnej aktivity je len jeden prvok ImageView. V súbore dimens.xml je uvedená definícia posunu:

<resources>
<dimen name="posun">100dp</dimen>
</resources>

V zložke res vytvorte podzložku anim a v nej súbor animace.xml. V krátkosti vysvetlíme jednotlivé fázy nami definovanej animácie.

  • V prvej sekcii <alpha> sa postupne zmenšuje transparentnosť objektu z hodnoty 0.0 (úplne priesvitné) na hodnotu 1.0 (nepriesvitné). Fáza trvá 2000 milisekúnd.
  • V druhej sekcii <rotate> sa objekt otočí 3× dookola, teda 3× o 360 stupňov okolo osi z v priebehu troch sekúnd.
  • V sekcii <translate> sa objekt plynulo posunie na novú pozíciu.
  • V poslednej sekcii <alpha> sa objekt znovu stáva priesvitným.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<alpha
android:duration="2000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:toAlpha="1.0" />
<rotate
android:duration="3000"
android:fromDegrees="0"
android:interpolator="@android:anim/accelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="3000"
android:toDegrees="1080" />
<translate
android:duration="3000"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="@android:anim/overshoot_interpolator"
android:startOffset="7000"
android:toXDelta="100"
android:toYDelta="100" />
<alpha
android:duration="2000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/decelerate_interpolator"
android:startOffset="13000"
android:toAlpha="0.0" />
</set>
Animácia je definovaná v kóde hlavnej aktivity a spustená v metóde nWindowFocusChanged().
public class MainActivity extends Activity
{
private ImageView iw;
private Animation anim;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iw = (ImageView) findViewById(R.id.obrazek);
anim = AnimationUtils.loadAnimation(this, R.anim.animace);
}
@Override
public void onWindowFocusChanged(boolean hasFocus)
{
super.onWindowFocusChanged(hasFocus);
if (hasFocus) iw.startAnimation(anim);
}
}

Property Animation

Jednu z hlavných nevýhod klasickej animácie by ste objavili, keby ste chceli snímať dotyky na pohybujúci sa objekt, napríklad by ste takto ťukaním prstom chceli zostreľovať objekty. Neuspeli by ste, pretože počas animácie sa len priebežne vykresľuje posun z pôvodnej pozície do novej. Skutočné miesto, kde môžete kliknúť na objekt, sa nezmení, takže by ste museli implementovať vlastnú logiku na ovládanie dotykom.

Od verzie API 11 (Android 3.0 Honeycomb) je k dispozícii nový typ animácie - Property Animation, ktorý je oveľa flexibilnejší. Môžete definovať animáciu, ktorá dokáže meniť akúkoľvek vlastnosť objektu v priebehu času bez ohľadu na to, či sa objekt kreslí na obrazovku, alebo nie. Fungovanie animácie vysvetľuje jej názov. Animácia zavolá setter objektu a nastaví mu novú hodnotu zvoleného parametra, získanú interpoláciou.

Môžete definovať nasledujúce vlastnosti animácie:

  • Doba trvania - predvolená dĺžka je 300 ms.
  • Čas interpolácie - môžete definovať, akým spôsobom budú hodnoty parametra vypočítavané. Algoritmus výpočtu musíte navrhnúť ako funkciu, kde vstupnou veličinou je aktuálne uplynutý čas a výsledná hodnota je v intervale 0 - 1.
  • Správanie a počet opakovaní - môžete určiť, či sa animácia bude alebo nebude opakovať, keď dosiahne koniec, a ak áno, koľkokrát. Môžete takisto určiť, či chcete animáciu prehrať v opačnom smere.
  • Zoskupovanie - môžete zoskupiť animácie do logických množín, ktoré sú spúšťané spoločne alebo postupne, alebo po uplynutí zadaného oneskorenia.
  • Oneskorenie obnovovania - môžete určiť, ako často sa bude aktualizovať zobrazenie.

S objektom manipuluje trieda ObjectAnimator, odvodená od triedy ValueAnimator. Typicky sa volá nad objektom odvodeným od View. K dispozícii sú metódy setRotationX(), setRotationY(), setTranslationX(),setTranslationY(), setScaleX(), setScaleY() a setAlpha().

Ukážeme najjednoduchší príklad, v ktorom pomocou animácie zmeníme farbu pozadia objektu ImageView. V kóde XML layoutu hlavnej aktivity je len prvok ImageView a tlačidlo na spustenie animácie. Celé dejstvo sa odohráva v obsluhe udalosti zatlačenia tlačidla, ktorým používateľ spustí animáciu. Vytvoríme objekt ValueAnimator, ktorého úlohou bude meniť hodnotu farby zo žltej na zelenú. Mapovanie zmeny hodnoty kódu farby definujeme pomocou objektu TypeEvaluator, v tomto prípade, keďže ide o hodnotu ARGB, využije sa ArgbEvaluator.

ValueAnimator anim = ValueAnimator.ofObject(new ArgbEvaluator(), Color.YELLOW, Color.GREEN);

Evaluátor v tomto prípade nemôže urobiť lineárne mapovanie, pretože hexadecimálne hodnoty priradené použitým farbám sú

Color.YELLOW = #ffff00
Color.GREEN = #00ff00

Keby interpolátor začal hodnotu mapovať lineárne, začala by sa prejavovať modrá zložka farby, pretože pozícia farebných zložiek RGB v hexadecimálnej konštante čísla farby je #RRGGBB. K dispozícii sú evaluátory ArgbEvaluator, FloatEvaluator, IntEvaluator a RectEvaluator. V listeneri, ktorý sa volá pri každej zmene animácie, možno realizovať nejakú akciu. V našom príklade na ilustráciu fungovania nastavíme pre ImageView novú hodnotu pozadia.

public class MainActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button startButton = (Button) findViewById(R.id.start_button);
startButton.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
spustAnimaci();
}
});
}
public void spustAnimaci()
{
final ImageView imageView = (ImageView) findViewById(R.id.image_view1);
ValueAnimator anim = ValueAnimator.ofObject(new ArgbEvaluator(),
Color.YELLOW, Color.GREEN);
anim.addUpdateListener(new AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(ValueAnimator animation)
{
imageView.setBackgroundColor((Integer) animation
.getAnimatedValue());
}
});
anim.setDuration(3000);
anim.start();
}
}

 

 

Zobrazit Galériu
Autor: Marek Sopko

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

ITPro

Linux súkromne i pracovne v2.0 (14. časť): Small Business Server

09.11.2016 14:57

Pojem Small Business Server (malý firemný server) začala používať spoločnosť Microsoft ešte v roku 2000 na označenie servera, ktorý ­dokázal plniť úlohy niekoľkých samostatných serverov. Aplikačná vrs ...

ITPro

Industry 4.0: Fikcia alebo už realita?

09.11.2016 14:52

Štvrtá priemyselná revolúcia je pomenovanie rozsiahlych zmien prudko vstupujúcich do súčasného priemyslu. Nositeľom týchto zmien je digitalizácia výroby a optimalizácia všetkých podnikových procesov v ...

ITPro

Vývoj aplikácií UWP pre Xbox One II.

09.11.2016 14:47

V predošlej časti sme ukázali postup, ako si ­vytvoriť vývojársky účet a aktivovať vývojársky režim na hernej konzole Xbox One, aby ste mohli testovať svoje aplikácie. Výhodou hernej konzoly Xbox je v ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá