Создание покадровой анимации

Суть покадровой анимации прекрасно показана в этой гифке, которую я нашел в И-нете.

Сформулируем задачу.

       На фоне какого-либо изображения, должна происходить покадровая анимация объекта. Я выбрал фоном песок пустыни, а объектом - тарантула, который шевелит ножками.

Приступим...

Этап 1

    Создайте в Android Studio обычный проект, где а экране появится «Hello world!».

Нажимаем Start a new Android Studio project.

Я назвал свой проект

Application name: FrameAnimation.

   В графе Company Domain можете ввести свою почту, но тогда не забудьте исправить имя пакета, если просто будете копировать и вставлять файлы приложения.

Потом установим минимальный SDK.

    В моем случае это API 16: Android 4.1. Студия подсказывает нам, что почти 83% пользователей в мире смогут смотреть наше приложение.

Жмем Next и выбираем по умолчанию Blank Activity.

Осталось немного. :)

Выбираем имя макета (Layout name): main.

Андроид Студио делает сборку приложения по умолчанию.

На экране у меня появилось следующее:

Над картинкой телефона вы видите его марку и версию Андроид. Для быстрой загрузки эмулятора я выбрал вместо телефона планшет (Tablet) и API19: Android 4.4.2.

    Мой выбор также обусловлен тем, что у меня есть реальный планшет с такими характеристиками, на котором я смогу проверить работу приложения.

Этап второй. Создаем приложение.

2.1 Сначала нужно загрузить в папку drawable фоновую картинку pesok.png и три файла тарантула, на которых у него разное положение лапок tarantula01.png, tarantula02.png и tarantula03.png. Картинок для анимации может быть сколько угодно, но нужно помнить, что при проигрывании приложение их загружает все в память и при больших объемах картинок, могут возникнуть проблемы. Как всегда, нужно искать компромисс между красотой анимации и быстродействием приложения.

2.2 В той же папке drawable создаем файл tarantula.xml

В поле пустого файла размещаем такой код.

tarantula.xml

<?xml version="1.0" encoding="utf-8"?>

<animation-list

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:oneshot="false">

    <item android:drawable="@drawable/tarantula01" android:duration="1000"/>

    <item android:drawable="@drawable/tarantula02" android:duration="500"/>

    <item android:drawable="@drawable/tarantula03" android:duration="700"/>

</animation-list>

Как вы видите, это список наших картинок для проигрывания.

Если android:oneshot="false", то анимация будет проигрываться бесконечно. Если "false" заменить на “true”, то один раз.

Устанавливается также время показа картинки в миллисекундах, например:

duration="1000" означает, что картинка будет показываться 1 с.

2.3 Меняем содержимое файла main.xml

main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    tools:context=".MainActivity">

    <ImageView

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:id="@+id/imageView"

        android:layout_centerVertical="true"

        android:scaleType="fitXY"

        android:src="@drawable/pesok"

        android:contentDescription="image_pesok" />

    <FrameLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent">

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/imageView1"

            android:layout_gravity="center"

            android:src="@drawable/tarantula"

            android:contentDescription="anim_tarantula"

             />

    </FrameLayout>

</FrameLayout>

На первом FrameLayout выводим через метод ImageView фоновое изображение (android:src="@drawable/pesok"), которое растягиваем на весь экран (android:scaleType="fitXY").

На втором слое размещаем анимацию (android:src="@drawable/tarantula").

2.4. В завершении рассмотрим содержимое файла MainActivity.java

В нем мы изменили класс наследования для  MainActivity, чтобы убрать полоску бара сверху экрана, на котором выводится имя приложения.

MainActivity.java

package com.adc2017gmail.frameanimation;

import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();

        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }

        return super.onOptionsItemSelected(item);

    }

}

2.5 Запускаем в работу приложение, нажав зеленый треугольник вверху меню.

Студия предлагает выбрать эмулятор.

Жмем Ок и ждем пару минут.

В итоге появляется окно с замком.

Тянем замок, зажав левую кнопку мыши, вправо.

Нажимаем иконку нашего приложения (смотри видео) и наблюдаем тарантула, который дергает лапками. 

Вот и сказочке конец.

Буду рад, если найдете в моей статье ошибки, так как сам только начинаю в этом деле разбираться. А, не ошибается, известно кто. :)

PS: При попытке запустить приложение на реальном планшете, наблюдается следующее: анимация не работает. Будем разбираться...

Решение проблемы:
В MainActivity.java допишите код

public class MainActivity extends Activity {

    /*Объявляем метод*/

    AnimationDrawable mAnim;

    

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        /*Запускаем метод ImageView для image, который нашли в R.java*/

        ImageView image1 = (ImageView)findViewById(R.id.imageView1);

       

/* Находим по идентификатору в папке drawable файл tarantula.xml и прикрепляем его, как ресурс к области  image */

        image1.setBackgroundResource(R.drawable.tarantula);

      

    /*В переменную mAnim записываем картинку из ресурса*/

        mAnim = (AnimationDrawable)image1.getBackground();

       

        mAnim.start();

}