Перемещение вида с помощью анимации

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

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

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

Измените положение объекта с помощью ObjectAnimator.

API ObjectAnimator предоставляет способ изменения свойств представления с заданной длительностью. Он содержит статические методы для создания экземпляров ObjectAnimator в зависимости от типа анимируемого атрибута. При изменении положения представлений на экране используйте атрибуты translationX и translationY .

Вот пример ObjectAnimator , который перемещает изображение на 100 пикселей слева от экрана за 2 секунды:

Котлин 

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

Java 

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

В этом примере используется метод ObjectAnimator.ofFloat() , поскольку значения смещения должны быть типа float. Первый параметр — это представление, которое вы хотите анимировать. Второй параметр — это свойство, которое вы анимируете. Поскольку представление должно перемещаться по горизонтали, используется свойство translationX . Последний параметр — это конечное значение анимации. В этом примере значение 100 указывает позицию на определенное количество пикселей от левого края экрана.

Следующий метод задает продолжительность анимации в миллисекундах. В этом примере анимация длится 2 секунды (2000 миллисекунд).

Последний метод запускает анимацию, которая обновляет положение элемента на экране.

Для получения дополнительной информации об использовании ObjectAnimator см. раздел «Анимация с помощью ObjectAnimator» .

Добавить изогнутое движение

Хотя использование ObjectAnimator удобно, по умолчанию он перемещает представление вдоль прямой линии между начальной и конечной точками. В Material Design для пространственного перемещения объектов на экране и синхронизации анимации используются кривые. Использование криволинейного движения придает вашему приложению более «материальный» вид и делает анимацию более интересной.

Проложите свой собственный путь

Класс ObjectAnimator имеет конструкторы, позволяющие анимировать координаты, используя одновременно два или более свойств вместе с путем. Например, следующий аниматор использует объект Path для анимации свойств X и Y представления:

Котлин 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

Java 

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Вот как выглядит анимация дуги:

Рисунок 1. Анимация изогнутой траектории.

Interpolator — это реализация кривой сглаживания. Дополнительную информацию о концепции кривых сглаживания см. в документации Material Design . Interpolator определяет, как рассчитываются конкретные значения в анимации в зависимости от времени. Система предоставляет XML-ресурсы для трех основных кривых, описанных в спецификации Material Design:

  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml

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

Класс PathInterpolator — это интерполятор, представленный в Android 5.0 (API 21). Он основан на кривой Безье или объекте Path . В примерах Android в документации Material Design для сглаживания используется PathInterpolator .

PathInterpolator имеет конструкторы, основанные на различных типах кривых Безье. Все кривые Безье имеют начальную и конечную точки, фиксированные в координатах (0,0) и (1,1) соответственно. Остальные аргументы конструктора зависят от типа создаваемой кривой Безье.

Например, для квадратичной кривой Безье необходимы только координаты X и Y одной контрольной точки:

Котлин 

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Java 

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

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

Аналогичным образом, кубический конструктор Безье имеет фиксированные начальную и конечную точки, но требует наличия двух контрольных точек:

Котлин 

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Java 

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Это реализация кривой замедления и сглаживания, характерной для Material Design.

Для большего контроля можно использовать произвольный Path для определения кривой:

Котлин 

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Java 

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

В результате получается та же кривая сглаживания, что и в примере с кубической кривой Безье, но вместо нее используется Path .

Также можно определить интерполятор пути в виде XML-ресурса: 

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

После создания объекта PathInterpolator вы можете передать его методу Animator.setInterpolator() . Animator использует интерполятор для определения времени или кривой траектории в момент запуска.

Котлин 

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

Java 

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();