Создайте анимацию, где ImageView скользит вверх и ниже ImageView, в котором исчезает LinearLayout

Question

Я пытаюсь создать простую активность с помощью формы входа. Я хочу, чтобы логотип приложения находился прямо над кнопкой входа, а когда пользователь нажимает кнопку входа, логотип немного сдвигается вверх, а между логотипом и кнопкой входа появляется форма входа (имя пользователя, поля паролей). Так как я новичок в Android Animations, мне нужна помощь.

У меня есть следующий макет:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ImageView android:id="@+id/logo"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginBottom="8dp"
               android:src="@drawable/logo"
               android:layout_centerHorizontal="true"
               android:layout_above="@+id/login_form"/>

    <LinearLayout android:id="@id/login_form"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"
                  android:layout_above="@+id/sign_in"
                  android:visibility="gone">

        <EditText android:id="@+id/username"
                  android:layout_width="match_parent"
                  android:layout_height="48dp"
                  android:layout_marginBottom="8dp"
                  android:textColor="@color/Black"
                  android:textColorHint="@color/Black"
                  android:textIsSelectable="false"
                  android:hint="@string/username"/>

        <EditText android:id="@+id/password"
                  android:layout_width="match_parent"
                  android:layout_height="48dp"
                  android:inputType="textPassword"
                  android:textColor="@color/Black"
                  android:textColorHint="@color/Black"
                  android:textIsSelectable="false"
                  android:hint="@string/password"/>

    </LinearLayout>

    <Button android:id="@id/sign_in"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="8dp"
            android:layout_alignParentBottom="true"
            android:textColor="@color/White"
            android:textSize="18sp">
</RelativeLayout>

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

mForm.setAlpha(0.0f);
mForm.setScaleX(0.0f);
mForm.setScaleY(0.0f);
mForm.setVisibility(View.VISIBLE);

mForm.animate()
        .alpha(1.0f)
        .scaleX(1.0f)
        .scaleY(1.0f)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .setDuration(mAnimationDurationMedium);

<>

mLogo.animate()
    .translationYBy(mDisplayMetrisUtils.dpToPixels(-96.0f))
    .setDuration(mAnimationDurationMedium)
    .setInterpolator(new AccelerateDecelerateInterpolator())
    .withEndAction(new Runnable() {
        @Override
        public void run() {
            mForm.setAlpha(0.0f);
            mForm.setScaleX(0.0f);
            mForm.setScaleY(0.0f);
            mForm.setVisibility(View.VISIBLE);

            mForm.animate()
                    .alpha(1.0f)
                    .scaleX(1.0f)
                    .scaleY(1.0f)
                    .setInterpolator(new AccelerateDecelerateInterpolator())
                    .setDuration(mAnimationDurationMedium);
        }
    });

<>

mForm.setAlpha(0.0f);
mForm.setScaleX(0.0f);
mForm.setScaleY(0.0f);
mForm.setVisibility(View.VISIBLE);

mForm.animate()
        .alpha(1.0f)
        .scaleX(1.0f)
        .scaleY(1.0f)
        .setInterpolator(new AccelerateDecelerateInterpolator())
        .setDuration(mAnimationDurationMedium)
        .withStartAction(new Runnable() {
            @Override
            public void run() {
                mLogo.animate()
                        .translationYBy(-mForm.getHeight())
                        .setInterpolator(new AccelerateDecelerateInterpolator())
                        .setDuration(mAnimationDurationMedium);
            }
        });

Из того, что я понимаю, даже если я установил шкалу x и y для LinearLayout на 0, как только он становится VISIBLE, он занимает все необходимые пиксели, необходимые для его одновременного отображения, даже если его масштаб установлен на 0, таким образом, внезапный скачок вверх логотип. Однако я хотел бы добиться, чтобы LinearLayout постепенно занимал больше места и имел эффект плавного скольжения для логотипа.

Я пытался молиться темным лордам, но безуспешно. Может кто-нибудь сказать мне, что я упускаю, и указать мне правильное направление? Есть ли способ создать анимацию, где я преобразую высоту LinearLayout от 0dp до wrap_content?

Заранее спасибо, Димитрис.

Answer 1

Рассматривали ли вы использование LinearLayout с флагом animateLayoutChanges?

Я думаю, что это может дать вам желаемый эффект с почти нулевой работой. Замените ваш внешний RelativeLayout на LinearLayout, а затем, когда вы измените видимость формы, он будет анимировать свой вход.

Смотрите эту ссылку для документов: http://developer.android.com/training/animation/layout.html