SAMSUNG_06202 M SAMSUNG_06202 M SAMSUNG_06202 M Advertisement

Naučte sa vyvíjať Android aplikácie – animácia

0

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();
    }
}

Luboslav Lacko

Všetky autorove články
Vývoj Android Android aplikácia Android Studio

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať