Создание простой фреймовой анимации в Android приложении
Главная » Создание простой фреймовой анимации в Android приложении

С помощью стандартных возможностей Android Studio можно создавать довольно симпатичную анимацию. Что интересно, есть несколько способов создания анимации, возможности не ограничиваются каким то один методом. Один из таких способов был показан в уроке создания перехода, там мы получили красивую анимацию шаров с помощью перехода.

На этот раз рассмотрим еще один интересный способ создания эффекта анимации. Этот способ напоминает нам сам принцип эффекта анимации - есть набор картинок, кадров, которые имеют похожие изображения с малыми отличиями между ними: 

Так ведь делаются и мультфильмы, и фильмы. Благодаря быстрой прокрутке (показу) поочередно таких изображений и возникает эффект анимации. Чем больше таких мало отличающихся картинок, чем меньше шаг между изменениями, так скажем, то тем плавнее и качественнее выглядит анимация, видео. Вот и говорят - качество видео сколько то кадров в секунду.

Вот именно такой эффект мы и будем использовать. Неплохо бы сделать анимацию с теми рожицами выше, ну да ладно, сделаем, как обычно, с шариками.

Итак, создаем новый проект, выбираем Blank Activity. Начнем с заготовлению шариков для анимации. В папке приложения drawable создаем новый файл circle1.xml. Создаем в этом файле кружок, задаем его цвет и размер:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval"
 android:dither="true">
 <gradient
 android:startColor="#FFA07A"
 android:endColor="#FFA07A"
 android:type="linear"/>
 <size
 android:height="150dp"
 android:width="150dp"/>
</shape>

Теперь создадим таким же образом еще, ну 5 штук шариков, которые будут использоваться для создания анимации. Создаем файлы circle2.xml, circle3.xmlcircle4.xmlcircle5.xml, circle6.xml в той же папке drawable. Разница между шариками будет только в их цвете. Нет смысла приводить 6 экземпляров одинакового кода, разница, как уже сказано, только в цвете:

circle2.xml:

android:startColor="#FF7F50"
android:endColor="#FF7F50"

circle3.xml:

android:startColor="#FF6347"
android:endColor="#FF6347"

circle4.xml:

android:startColor="#FF4500"
android:endColor="#FF4500"

circle5.xml:

android:startColor="#FF8C00"
android:endColor="#FF8C00"

circle6.xml:

android:startColor="#FFA500"
android:endColor="#FFA500"

Вот так, с разноцветными шариками закончили. Теперь с этих с xml файлов с изображениями нужно сделать анимацию. Делается это так. В этой же папке drawable создаем еще один файл anim.xml. В нем нам нужно создать такую штуку, как <animation-list> и наполнить ее нашими изображениями:

<animation-list
 android:oneshot="false"
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:drawable="@drawable/circle1"
 android:duration="100"/>
 <item
 android:drawable="@drawable/circle2"
 android:duration="100"/>
 <item
 android:drawable="@drawable/circle3"
 android:duration="100"/>
 <item
 android:drawable="@drawable/circle4"
 android:duration="100"/>
 <item
 android:drawable="@drawable/circle5"
 android:duration="100"/>
 <item
 android:drawable="@drawable/circle6"
 android:duration="100"/>
</animation-list>

Строка android:oneshot="false" настраивает количество повторов анимации. Если стоит значение "true" то анимация повториться только один раз, если "false" - то выполняется бесконечный повтор. Строка duration означает продолжительность показа каждого объекта, у нас выставлено 100 мс = 0,1 секунды.

Переходим к редактированию внешнего вида нашего приложения. Открываем файл activity_main.xml. Создаем здесь всего один элемент - ImageView, который и будет изображать нашу анимацию:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity"
 android:id="@+id/bg">
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/an"
 android:layout_centerInParent="true"/>
</RelativeLayout>

Остается выполнить последний штрих, открываем файл MainActivity.java. Добавим к строкам импорта парочку таких:

import android.graphics.drawable.AnimationDrawable;
import android.widget.ImageView;

В методе onCreate создадим ссылку на наш элемент в activity_main.xml, настроим анимацию anim.xml ему в качестве фона, создадим саму анимацию и запустим ее:

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 //Ссылаемся на созданный ImageView:
 ImageView mAnimation = (ImageView)findViewById(R.id.an);
 //Настраиваем ему нашу анимацию в качестве фона:
 mAnimation.setBackgroundResource(R.drawable.anim);
 //Создаем саму анимацию:
 AnimationDrawable animation = (AnimationDrawable)mAnimation.getBackground();
 //Ну и запускаем анимацию:
 animation.start();
 }
}

Вот и все, анимация готова! Мы создали фреймовую анимацию и использовали ее в нашем приложении. Ничего сложного, но с помощью этого метода можно делать неплохие, красивые вещи. Кстати, можете сделать так же, но с использованием тех синих рожиц вверху, думаю, будет очень прикольно. 

Тестируйте на устройстве/эмуляторе с Android 4.2+, на версии ОС 2.3 эта анимация у меня не заработала, на планшете с Android 4.2 - заработало.

Категория: Уроки программирования | Просмотров: 1635 | Добавил: Oleg | Рейтинг: 5.0/2
Всего комментариев: 0
avatar