logo标签列表

安卓动画：如何正确地实现下拉/上滑视图的动画效果

androidanimationview
18

我正在尝试制作一个正确的下拉动画。下滑的视图应该在一个平稳的运动中将其下方的所有视图向下推，并且再次上滑时，所有视图都应该在一个平稳的运动中跟随它一起移动。

我尝试过的方法:

在代码中：

LinearLayout lin = (LinearLayout)findViewById(R.id.user_list_container);
                setLayoutAnimSlidedownfromtop(lin, this);
                lin.addView(getLayoutInflater().inflate(R.layout.user_panel,null),0);

并且：

public static void setLayoutAnimSlidedownfromtop(ViewGroup panel, Context ctx) {

      AnimationSet set = new AnimationSet(true);

      Animation animation = new AlphaAnimation(0.0f, 1.0f);
      animation.setDuration(100);
      set.addAnimation(animation);

      animation = new TranslateAnimation(
          Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF, 0.0f,
          Animation.RELATIVE_TO_SELF, -1.0f, Animation.RELATIVE_TO_SELF, 0.0f
      );
      animation.setDuration(500);
      set.addAnimation(animation);

      LayoutAnimationController controller =
          new LayoutAnimationController(set, 0.25f);
      panel.setLayoutAnimation(controller);

}

我的user_panel.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="vertical" >
    <ImageView 
        android:layout_alignParentLeft="true"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/icon" />
</LinearLayout>

主XML文件的顶部：

<LinearLayout
        android:id="@+id/user_list_container"
        android:layout_alignParentTop="true"
        android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
    <LinearLayout
        android:id="@+id/container"
        android:layout_below="@+id/user_list_container"
        android:orientation="vertical" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

以上方法的问题在于当我首先启动动画时，视图的空白空间被创建，然后视图向下滑动。我希望它可以缓慢地将所有其他视图向下推，而不是进行一次硬性动作。

1
我认为你需要看一下 LayoutTransition 类。它提供了在将视图添加/删除到/从布局中进行动画处理的机制。 - Aleks G
2个回答
58

所以最终我自己动手做了这件事，并从这篇答案中得到了一些帮助。

如果是Android 3.0，我可以使用属性动画，但现在不行，我只能自己动手实现。

以下是我的最终解决方案：

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * Class for handling collapse and expand animations.
 * @author Esben Gaarsmand
 *
 */
public class ExpandCollapseAnimation extends Animation {
    private View mAnimatedView;
    private int mEndHeight;
    private int mType;

    /**
     * Initializes expand collapse animation, has two types, collapse (1) and expand (0).
     * @param view The view to animate
     * @param duration
     * @param type The type of animation: 0 will expand from gone and 0 size to visible and layout size defined in XML. 
     * 1 will collapse view and set to gone
     */
    public ExpandCollapseAnimation(View view, int duration, int type) {
        setDuration(duration);
        mAnimatedView = view;
        mEndHeight = mAnimatedView.getLayoutParams().height;
        mType = type;
        if(mType == 0) {
            mAnimatedView.getLayoutParams().height = 0;
            mAnimatedView.setVisibility(View.VISIBLE);
        }
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        if (interpolatedTime < 1.0f) {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = (int) (mEndHeight * interpolatedTime);
            } else {
                mAnimatedView.getLayoutParams().height = mEndHeight - (int) (mEndHeight * interpolatedTime);
            }
            mAnimatedView.requestLayout();
        } else {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = mEndHeight;
                mAnimatedView.requestLayout();
            } else {
                mAnimatedView.getLayoutParams().height = 0;
                mAnimatedView.setVisibility(View.GONE);
                mAnimatedView.requestLayout();
                mAnimatedView.getLayoutParams().height = mEndHeight;
            }
        }
    }
}

用法示例:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class AnimationTestActivity extends Activity {
    private boolean mActive = false;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final Button animatedButton = (Button) findViewById(R.id.animatedButton);
        
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ExpandCollapseAnimation animation = null;
                if(mActive) {
                    animation = new ExpandCollapseAnimation(animatedButton, 1000, 1);
                    mActive = false;
                } else {
                    animation = new ExpandCollapseAnimation(animatedButton, 1000, 0);
                    mActive = true;
                }
                animatedButton.startAnimation(animation);
            }
        });
    }
}

XML:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <Button
        android:id="@+id/animatedButton"
        android:visibility="gone"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:text="@string/hello"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"/>
</LinearLayout>

编辑

测量 wrap_content 高度:

为了使wrap_content正常工作，我在开始动画之前测量了视图的高度，然后将此测量值用作实际高度。下面是测量视图高度并将其设置为新高度的代码（我假设视图使用屏幕宽度，根据自己的需求进行更改）: 

/**
 * This method can be used to calculate the height and set it for views with wrap_content as height. 
 * This should be done before ExpandCollapseAnimation is created.
 * @param activity
 * @param view
 */
public static void setHeightForWrapContent(Activity activity, View view) {
    DisplayMetrics metrics = new DisplayMetrics();
    activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

    int screenWidth = metrics.widthPixels;
    
    int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    int widthMeasureSpec = MeasureSpec.makeMeasureSpec(screenWidth, MeasureSpec.EXACTLY);

    view.measure(widthMeasureSpec, heightMeasureSpec);
    int height = view.getMeasuredHeight();
    view.getLayoutParams().height = height;
}
对于强制高度元素来说，这个方法是可行的。但不幸的是，这种方法对于自适应内容的元素无效 :( - Jscti
1
将“mEndHeight = mAnimatedView.getLayoutParams().height;”替换为“mEndHeight = type == 0 ? mAnimatedView.getLayoutParams().height : mAnimatedView.getMeasuredHeight();”，这样就可以使用“wrap_content”而不需要额外的方法“setHeightForWrapContent(Activity activity, View view)”了。 - triggs
1
哦，还需要 if(mEndHeight < 0) mEndHeight = mAnimatedView.getMeasuredHeight(); （如果视图开始最小化，则没有它，mEndHeight 将为 -2）。 - triggs
嘿Warpzit，这很有用，但我如何设置折叠/展开的方向？现在折叠是从下到上，展开是从上到下...我需要如何设置t-->b，b-->t，r-->l，l-->r的方向，同时适用于展开和折叠？ - user2754122
@user2754122，你需要提出一个新的问题来询问那个问题。 - Warpzit
显示剩余4条评论
5
谢谢Warpzit！你的回答非常有帮助。在我的情况下，我只想使用高度为wrap_content的视图进行动画处理。我尝试了 triggs 的两行建议，但在我的情况下它并没有起作用。（我没有花太多时间去追究原因）最终，我使用了 Warpzit 的稍加修改的ExpandCollapseAnimation以及他的静态方法来确定视图的高度。
稍微详细一点：
  1. 我在 ExpandCollapseAnimation 类中包含了他的静态方法 setHeightForWrapContent()。
  2. 我在 ExpandCollapseAnimation 构造函数中调用 setHeightForWrapContent() 以正确确定视图的高度。为此，我必须通过构造函数传递 activity。
  3. 在 applyTransformation() 方法中，当视图最终被减少为零高度时，我将视图的高度返回到 wrap_content。如果不这样做，并且稍后更改视图内容，则展开视图时会扩展到先前确定的高度。
以下是代码： 
public class ExpandCollapseAnimation extends Animation {
    private View mAnimatedView;
    private int mEndHeight;
    private int mType;

    public ExpandCollapseAnimation(View view, int duration, int type, Activity activity) {
        setDuration(duration);
        mAnimatedView = view;

        setHeightForWrapContent(activity, view);

        mEndHeight = mAnimatedView.getLayoutParams().height;

        mType = type;
        if(mType == 0) {
            mAnimatedView.getLayoutParams().height = 0;
            mAnimatedView.setVisibility(View.VISIBLE);
        }
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        if (interpolatedTime < 1.0f) {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = (int) (mEndHeight * interpolatedTime);
            } else {
                mAnimatedView.getLayoutParams().height = mEndHeight - (int) (mEndHeight * interpolatedTime);
            }
            mAnimatedView.requestLayout();
        } else {
            if(mType == 0) {
                mAnimatedView.getLayoutParams().height = mEndHeight;
                mAnimatedView.requestLayout();
            } else {
                mAnimatedView.getLayoutParams().height = 0;
                mAnimatedView.setVisibility(View.GONE);
                mAnimatedView.requestLayout();
                mAnimatedView.getLayoutParams().height = LayoutParams.WRAP_CONTENT;     // Return to wrap
            }
        }
    }

    public static void setHeightForWrapContent(Activity activity, View view) {
        DisplayMetrics metrics = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

        int screenWidth = metrics.widthPixels;

        int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        int widthMeasureSpec = MeasureSpec.makeMeasureSpec(screenWidth, MeasureSpec.EXACTLY);

        view.measure(widthMeasureSpec, heightMeasureSpec);
        int height = view.getMeasuredHeight();
        view.getLayoutParams().height = height;
    }
}

再次感谢你，Warpzit！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接