创建一个动画,其中ImageView向上滑动,在ImageView下方,LinearLayout淡入

时间:2015-03-25 09:46:15

标签: android android-animation viewpropertyanimator

我正在尝试使用登录表单创建一个简单的Activity。我想要做的是在登录按钮上方放置应用程序的徽标,当用户按下登录按钮时,徽标会稍微向上滑动,徽标和登录按钮之间会有登录表单(用户名,密码字段)淡入。由于我是Android动画的新手,我想要一些帮助。

我有以下布局:

<?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);

&LT;&GT;

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);
        }
    });

&LT;&GT;

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);
            }
        });

根据我的理解,即使我将LinearLayout的x和y比例设置为0,一旦它变得可见,它就会占用一次显示它所需的所有必要像素,即使它的比例设置为0,因此突然向上跳跃的徽标。我想要实现的是让LinearLayout逐渐占据更多空间,并为徽标提供平滑的上滑效果。

我曾尝试向黑暗领主祈祷但没有任何成功。有人能告诉我我错过了什么并指出了正确的方向吗?有没有办法创建动画,我将LinearLayout的高度从0dp转换为wrap_content?

提前致谢, 迪米瑞斯。

1 个答案:

答案 0 :(得分:1)

您是否考虑过将LinearLayout与animateLayoutChanges标志一起使用?

我认为这可以为您提供所需的效果,几乎无效。用LinearLayout替换外部RelativeLayout,然后当您更改表单的可见性时,它将为其入口设置动画。

请参阅此链接以获取文档: http://developer.android.com/training/animation/layout.html