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é ako triedy
Metódy klasickej animácie
Prakticky od prvých verzií API Android podporuje jednoduché animácie
- 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
Príklad TransitionDrawable animácie
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 XML súboroch 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 XML súbore hlavnej aktivity vložíme grafické prvky do layoutu ako ImageView. Zmeňte typ vizuálneho kontejnera z ConstraintLayout na RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:contentDescription="popis obrázku"
android:layout_centerVertical="true"/>
</RelativeLayout>
Animácia v trvaní 8 sekúnd (8 000 milisekú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
package com.example.animacia1;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
@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(8000);
}
Po spustení aplikácie sa vľavo zobrazí modrý obdĺžnik, ktorý postupne mizne a naopak vpravo sa začína zobrazovať fialový obdĺžnik
Príklad AnimationDrawable animácie
Táto metóda animácie sa najviac podobá tvorbe klasických animovaných filmov, ktoré sa pred érou pokročilej počítačovej grafiky skladali z jednotlivých obrázkov, ktoré sa potom snímali na jednotlivé políčka filmového pásu.
AnimationDrawable zobrazuje postupne sériu drawables objektov, pričom každý z objektov sa zobrazuje v stanovený čas.
Námetom príkladu bude zobraziť jednoduchú animáciu, v našom prípade animácia glóbusu. Obrázky pre váš príklad môžete nájsť na webe, alebo si ich môžete nakresliť. V layoute hlavnej aktivity prvok ImageView na zobrazenie animácie ako série obrázkov.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/animovany_obrazok"
android:layout_width="300dp"
android:layout_height="250dip"
android:layout_gravity="center"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:contentDescription="popis obrázku"
android:scaleType="centerCrop" />
</LinearLayout>
Uložte snímky, ktorí budú tvoriť animáciu do adresára drawable. V subore animacia.xml v zložke drawable je definícia priebehu animácie. Každý snímok tvoriaci animáciu bude zobrazený po dobu 300 milisekúnd. (výpis je skrátený)
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true" >
<item
android:drawable="@drawable/z0"
android:duration="300"/>
...
android:drawable="@drawable/z20"
android:duration="300"/>
</animation-list>
Kód hlavnej aktivity
package com.example.animacia2;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
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();
}
}
Zobrazit Galériu
