Статьи

Совет Android SDK: создание кадровой анимации

В этой статье «Быстрый совет» мы расскажем о необходимых шагах, необходимых для реализации кадровой анимации в приложении Android.

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

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


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

В исходной папке загрузки анимация использует десять кадров последовательности вращающегося гироскопа в качестве изображений JPEG:

Гироскоп Анимация

Результат очень короткий, но только для демонстрации.


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

1
2
3
4
5
6
7
<ImageView
    android:id=”@+id/gyro”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:layout_centerInParent=”true”
    android:contentDescription=”@string/gyro”
    />

Включите атрибут ID, чтобы вы могли настроить анимацию, отображаемую в представлении в коде Java Activity. Выберите атрибуты идентификатора и описания контента, соответствующие вашей собственной анимации. Мы не утруждаем себя установкой атрибута источника в XML-макете, так как мы будем это делать при создании экземпляра анимации из кода Activity.


В папке (ах) ресурсов drawables вашего приложения создайте новый XML-файл для представления анимации вашего кадра. При загрузке файл называется «gyro_animation.xml». Внутри нового файла сначала введите элемент списка анимации следующим образом:

1
2
3
4
<animation-list xmlns:android=”http://schemas.android.com/apk/res/android”
    android:oneshot=”false” >
 
</animation-list>

В атрибуте oneshot введите значение «true», если вы хотите, чтобы анимация повторялась один раз, или «false», если вы хотите, чтобы оно повторялось. Внутри элемента списка анимации добавьте элемент item для каждого изображения кадра, которое вы хотите отобразить:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<item
    android:drawable=”@drawable/gyroscope1″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope2″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope3″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope4″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope5″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope6″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope7″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope8″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope9″
    android:duration=”100″/>
<item
    android:drawable=”@drawable/gyroscope10″
    android:duration=”100″/>

Значения длительности являются целыми числами, указывающими, как долго должен отображаться каждый элемент. Измените атрибуты продолжительности, если вы хотите, чтобы каждый кадр отображался в течение определенного периода времени. Элементы будут отображаться в указанном порядке, поэтому вы можете понять, почему это помогает, если у вашего изображения или нарисованных файлов есть числовой суффикс, указывающий, где каждый из них находится в рабочем порядке. Файлы изображений в загружаемом файле называются «gyroscope1.jpg», «gyroscope2.jpg» и так далее.


В вашем файле класса Activity теперь вы можете применить и запустить анимацию. Добавьте следующие операторы импорта:

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

Внутри метода onCreate получите ссылку на представление изображения, которое вы включили в макет:

1
ImageView gyroView = (ImageView) findViewById(R.id.gyro);

Установите анимацию, которую вы создали, в качестве фонового ресурса для представления:

1
gyroView.setBackgroundResource(R.drawable.gyro_animation);

Создайте объект Animation Drawable на основе этого фона:

1
AnimationDrawable gyroAnimation = (AnimationDrawable) gyroView.getBackground();

Запустите анимацию:

1
gyroAnimation.start();

Анимация начнется, как только начнется действие. Если вы хотите запустить анимацию при взаимодействии с пользователем, просто поместите стартовый вызов в метод прослушивателя событий. Это позволит вам запустить анимацию, когда пользователь касается определенного элемента View.


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