Анимация рисуемой графики

Попробуйте способ создания композиций.
Jetpack Compose — это рекомендуемый набор инструментов для создания пользовательского интерфейса для Android. Узнайте, как использовать анимации в Compose.
Рисунок 1. Анимированное изображение.

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

Первый вариант — использовать AnimationDrawable . Это позволяет указать несколько статических файлов изображений , которые отображаются по одному для создания анимации. Второй вариант — использовать AnimatedVectorDrawable , который позволяет анимировать свойства векторного изображения .

Используйте AnimationDrawable

Один из способов создания анимации — загрузка последовательности графических ресурсов, например, рулона пленки. Класс AnimationDrawable является основой для таких графических анимаций.

Вы можете определить кадры анимации в своем коде, используя API класса AnimationDrawable , но проще определить их с помощью одного XML-файла, в котором перечислены кадры, составляющие анимацию. XML-файл для такого типа анимации должен находиться в каталоге res/drawable/ вашего Android-проекта. В этом случае инструкции указывают порядок и продолжительность каждого кадра анимации.

XML-файл состоит из элемента <animation-list> в качестве корневого узла и ряда дочерних узлов <item> , каждый из которых определяет кадр — ресурс изображения и его длительность. Вот пример XML-файла для анимации Drawable :

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

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

Если вы сохраните этот XML-файл как rocket_thrust.xml в каталоге res/drawable/ проекта, вы сможете добавить его в качестве фонового изображения к View , а затем вызвать start() для воспроизведения анимации. Вот пример активности, в которой анимация добавляется к ImageView и затем анимируется при касании экрана:

Котлин

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

Важно отметить, что метод start() `, вызываемый для ` AnimationDrawable нельзя вызвать во время метода onCreate() вашего Activity , поскольку ` AnimationDrawable еще не полностью прикреплен к окну. Чтобы воспроизвести анимацию немедленно, без необходимости взаимодействия, вы можете вызвать ее из метода onStart() вашего Activity , который вызывается, когда Android делает представление видимым на экране.

Для получения дополнительной информации о синтаксисе XML, доступных тегах и атрибутах см. раздел «Ресурсы анимации» .

Используйте AnimatedVectorDrawable

Векторный рисунок — это тип изображения, который масштабируется без пикселизации или размытия. Класс AnimatedVectorDrawable (а также AnimatedVectorDrawableCompat для обратной совместимости) позволяет анимировать свойства векторного рисунка, например, вращать его или изменять данные пути для преобразования в другое изображение.

Обычно анимированные векторные изображения определяются в трех XML-файлах:

  • Векторный файл, содержащий элемент <vector> в res/drawable/ .
  • Анимированный векторный рисунок, созданный с помощью элемента <animated-vector> в res/drawable/ .
  • Один или несколько аниматоров объектов с элементом <objectAnimator> в res/animator/ .

Анимированные векторные изображения могут анимировать атрибуты элементов <group> и <path> . Элемент <group> определяет набор путей или подгрупп, а элемент <path> определяет пути, которые будут нарисованы.

При определении векторного изображения, которое вы хотите анимировать, используйте атрибут android:name , чтобы присвоить группам и путям уникальные имена, позволяющие ссылаться на них из определений аниматоров. Например:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

Определение анимированного векторного изображения ссылается на группы и пути в векторном изображении по их именам:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

В определениях анимации представлены объекты ObjectAnimator или AnimatorSet . Первый аниматор в этом примере вращает целевую группу на 360 градусов:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

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

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Вот результат работы AnimatedVectorDrawable :

Рисунок 2. AnimatedVectorDrawable рисунок.

Предварительный просмотр анимированного векторного изображения (AVD)

Инструмент «Анимированные векторные изображения» в Android Studio позволяет предварительно просматривать анимированные ресурсы. Этот инструмент помогает предварительно просматривать ресурсы <animation-list> , <animated-vector> и <animated-selector> в Android Studio и упрощает доработку пользовательских анимаций.

Предварительный просмотр и воспроизведение анимации пользователем в Android Studio.
Рисунок 3. Инструмент «Анимированный векторный рисунок» в Android Studio.

Для получения более подробной информации см. справочник API для AnimatedVectorDrawable .