понедельник, 23 марта 2015 г.

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

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

Приступим...
Этап 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();
}

     



Комментариев нет:

Отправить комментарий