Плавный переход между представлениями

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

Вот пример анимации перехода от индикатора прогресса к некоторому текстовому контенту.

Анимация плавного перехода
 

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

  • src/CrossfadeActivity.java
  • layout/activity_crossfade.xml
  • menu/activity_crossfade.xml

Создайте представления

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

Настройка анимации

Для настройки анимации:

  1. Создание переменные члены класса для представлений, которые вы хотите анимировать. Вам понадобятся эти ссылки позже при изменении представления во время анимации.
  2. Для представления, которое исчезло, установите его видимость в GONE. Это предотвращает представление от использования места на макете, и не включает для него вычисление макета, ускоряя обработку.
  3. Сохраните config_shortAnimTime (системное свойство) в переменной члене класса. Это свойство определяет стандартное "короткое" время для анимации. Эта продолжительность идеально подходит для тонких анимаций или анимаций, которые происходят очень часто. config_longAnimTime и config_mediumAnimTime также доступны, если вы хотите их использовать.

Вот пример с использованием макета из предыдущим фрагмента кода в качестве представления содержимого деятельности:

public class CrossfadeActivity extends Activity {

    private View mContentView;
    private View mLoadingView;
    private int mShortAnimationDuration;

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        mContentView = findViewById(R.id.content);
        mLoadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        mContentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }

Анимация переключения представлений

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

  1. Для представления, которое появляется, установите значение alpha в 0 и видимость в VISIBLE. (Помните, что оно было изначально установлено в GONE.) Это делает представление видимым, но полностью прозрачным.
  2. Для того представление, которое появляется, анимируйте его значение alpha от 0 до 1. В то же время, для представление, которое исчезает, анимируйте значение alpha от 1 до 0.
  3. Используя onAnimationEnd() в Animator.AnimatorListener, установите видимость представления, которое исчезло, в GONE. Несмотря на то, значение alpha 0, установка видимости представления в GONE предотвращает представление от использования места на макете, и не включает для него вычисление макета, ускоряя обработку.

Следующий метод показывает пример, как это сделать:

private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;

...

private void crossfade() {

    // Set the content view to 0% opacity but visible, so that it is visible
    // (but fully transparent) during the animation.
    mContentView.setAlpha(0f);
    mContentView.setVisibility(View.VISIBLE);

    // Animate the content view to 100% opacity, and clear any animation
    // listener set on the view.
    mContentView.animate()
            .alpha(1f)
            .setDuration(mShortAnimationDuration)
            .setListener(null);

    // Animate the loading view to 0% opacity. After the animation ends,
    // set its visibility to GONE as an optimization step (it won't
    // participate in layout passes, etc.)
    mLoadingView.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mLoadingView.setVisibility(View.GONE);
                }
            });
}