Запуск действия с помощью анимации

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

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

Рисунок 1. Переход с общими элементами.

  • Анимация «вход» определяет, как элементы в активности появляются на сцене. Например, при анимации explode » элементы появляются на сцене снаружи и перемещаются внутрь, к центру экрана.
  • Анимация выхода определяет, как элементы интерфейса покидают сцену. Например, при анимации выхода explode элементы интерфейса покидают сцену, удаляясь от центра.
  • Анимация перехода с использованием общих элементов определяет, как элементы, используемые совместно двумя активностями, перемещаются между этими активностями. Например, если две активности имеют одно и то же изображение в разных положениях и размерах, анимация перехода с использованием общего элемента changeImageTransform плавно перемещает и масштабирует изображение между этими активностями.

Android поддерживает следующие варианты перехода при входе и выходе:

  • explode : перемещает объекты ближе к центру сцены или дальше от него.
  • slide : перемещает изображение ближе или дальше от одного из краев сцены.
  • fade : добавляет или удаляет элемент из сцены, изменяя его прозрачность.

Поддерживаются любые переходы, наследующие класс Visibility , как переходы при входе или выходе. Для получения дополнительной информации см. справочник API для класса Transition .

Android также поддерживает следующие переходы между общими элементами:

  • changeBounds : анимирует изменения границ макета целевых представлений.
  • changeClipBounds : анимирует изменения границ отсечения целевых представлений.
  • changeTransform : анимирует изменения масштаба и вращения целевых представлений.
  • changeImageTransform : анимирует изменения размера и масштаба целевых изображений.

При включении переходов между активностями в вашем приложении по умолчанию активируется плавный переход с кратковременным затуханием между входящей и выходящей активностями.

Рисунок 2. Переход между сценами с одним общим элементом.

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

Проверьте версию системы.

API для перехода между активностями доступны в Android 5.0 (API 21) и выше. Для сохранения совместимости с более ранними версиями Android перед вызовом API для любой из этих функций проверьте version системы во время выполнения:

Котлин

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Укажите пользовательские переходы

Во-первых, включите переходы содержимого окна с помощью атрибута android:windowActivityTransitions при определении стиля, наследующего от темы Material. Вы также можете указать переходы при входе, выходе и переходы между общими элементами в определении стиля:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

В этом примере переход change_image_transform определяется следующим образом:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

Элемент changeImageTransform соответствует классу ChangeImageTransform . Для получения дополнительной информации см. справочник API для Transition .

Чтобы включить анимацию перехода содержимого окна в вашем коде, вызовите функцию Window.requestFeature() :

Котлин

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

Чтобы задать переходы в коде, вызовите следующие функции, используя объект Transition :

Функции setExitTransition() и setSharedElementExitTransition() определяют переход при выходе из вызывающей активности. Функции setEnterTransition() и setSharedElementEnterTransition() определяют переход при входе в вызываемую активность.

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

Чтобы начать эффект перехода при появлении первого изображения как можно быстрее, используйте функцию Window.setAllowEnterTransitionOverlap() в вызываемом Activity. Это позволит вам создавать более эффектные переходы при появлении первого изображения.

Начните выполнение задания, используя переходы.

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

Котлин

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Если вы зададите переход при входе во второе действие, этот переход также активируется при запуске этого действия. Чтобы отключить переходы при запуске другого действия, укажите null пакет параметров.

Начните действие с использованием общего элемента.

Чтобы создать анимацию перехода между двумя действиями, имеющими общий элемент, выполните следующие действия:

  1. Включите анимацию перехода между окнами в вашей теме оформления.
  2. Укажите в своем стиле переход для общих элементов.
  3. Определите свой переход как XML-ресурс.
  4. Присвойте общее имя общим элементам в обоих макетах с помощью атрибута android:transitionName .
  5. Используйте функцию ActivityOptions.makeSceneTransitionAnimation() .

Котлин

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

Для общих динамических представлений, создаваемых в коде, используйте функцию View.setTransitionName() , чтобы указать общее имя элемента в обоих действиях.

Чтобы отменить анимацию перехода между сценами после завершения второго действия, вызовите функцию Activity.finishAfterTransition() вместо Activity.finish() .

Запустите действие с несколькими общими элементами.

Чтобы создать анимацию перехода между двумя активностями, имеющими более одного общего элемента, определите общие элементы в обоих макетах с помощью атрибута android:transitionName — или используйте функцию View.setTransitionName() в обеих активностях — и создайте объект ActivityOptions следующим образом:

Котлин

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));