Android:展开/折叠动画

假设我有一个垂直线性布局:

[v1]
[v2]

默认情况下，v1已经可见= GONE。我想用一个展开动画显示v1，同时下推v2。

我是这样做的:

Animation a = new Animation()
{
    int initialHeight;

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final int newHeight = (int)(initialHeight * interpolatedTime);
        v.getLayoutParams().height = newHeight;
        v.requestLayout();
    }

    @Override
    public void initialize(int width, int height, int parentWidth, int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        initialHeight = height;
    }

    @Override
    public boolean willChangeBounds() {
        return true;
    }
};

但是用这个解决方案，当动画开始时我有一个眨眼。我认为这是由于v1在应用动画之前显示全尺寸。

用javascript，这是一行jQuery!android有什么简单的方法吗?

当前回答

下面是两个简单的kotlin扩展函数概述。

fun View.expand() {
    visibility = View.VISIBLE
    val animate = TranslateAnimation(0f, 0f, -height.toFloat(), 0f)
    animate.duration = 200
    animate.fillAfter = true
    startAnimation(animate)
}

fun View.collapse() {
    val animate = TranslateAnimation(0f, 0f, 0f, -height.toFloat() )
    animate.duration = 200
    animate.fillAfter = true
    startAnimation(animate)
}

2020-12-17 12:26:27

其他回答

你的思路是对的。确保在动画开始之前将v1设置为布局高度为0。在开始动画之前，您需要初始化您的设置，使其看起来像动画的第一帧。

2011-02-09 15:27:38

我采用了@LenaYan的解决方案，但它并没有正常工作对我来说(因为它在折叠和/或扩展之前将视图转换为0高度视图)并做了一些更改。

现在它工作得很好，通过获取视图之前的高度并开始扩展这个大小。坍缩也是一样的。

你可以简单地复制和粘贴下面的代码:

public static void expand(final View v, int duration, int targetHeight) {

    int prevHeight  = v.getHeight();

    v.setVisibility(View.VISIBLE);
    ValueAnimator valueAnimator = ValueAnimator.ofInt(prevHeight, targetHeight);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            v.getLayoutParams().height = (int) animation.getAnimatedValue();
            v.requestLayout();
        }
    });
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.setDuration(duration);
    valueAnimator.start();
}

public static void collapse(final View v, int duration, int targetHeight) {
    int prevHeight  = v.getHeight();
    ValueAnimator valueAnimator = ValueAnimator.ofInt(prevHeight, targetHeight);
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            v.getLayoutParams().height = (int) animation.getAnimatedValue();
            v.requestLayout();
        }
    });
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.setDuration(duration);
    valueAnimator.start();
}

用法:

//Expanding the View
   expand(yourView, 2000, 200);

// Collapsing the View     
   collapse(yourView, 2000, 100);

很容易!

感谢LenaYan提供的初始代码!

2016-01-11 04:58:50

加上Tom Esterez的精彩回答和Erik B的精彩更新，我想我应该发布我自己的观点，将扩展和收缩方法压缩为一个。通过这种方式，你可以有这样一个动作……

button.setOnClickListener(v -> expandCollapse(view));

．.．它调用下面的方法，并让它在每次onClick()之后弄清楚要做什么…

public static void expandCollapse(View view) {

    boolean expand = view.getVisibility() == View.GONE;
    Interpolator easeInOutQuart = PathInterpolatorCompat.create(0.77f, 0f, 0.175f, 1f);

    view.measure(
        View.MeasureSpec.makeMeasureSpec(((View) view.getParent()).getWidth(), View.MeasureSpec.EXACTLY),
        View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
    );

    int height = view.getMeasuredHeight();
    int duration = (int) (height/view.getContext().getResources().getDisplayMetrics().density);

    Animation animation = new Animation() {
        @Override protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (expand) {
                view.getLayoutParams().height = 1;
                view.setVisibility(View.VISIBLE);
                if (interpolatedTime == 1) {
                    view.getLayoutParams().height = ViewGroup.LayoutParams.WRAP_CONTENT;
                } else {
                    view.getLayoutParams().height = (int) (height * interpolatedTime);
                }
                view.requestLayout();
            } else {
                if (interpolatedTime == 1) {
                    view.setVisibility(View.GONE);
                } else {
                    view.getLayoutParams().height = height - (int) (height * interpolatedTime);
                    view.requestLayout();
                }
            }
        }
        @Override public boolean willChangeBounds() {
            return true;
        }
    };

    animation.setInterpolator(easeInOutQuart);
    animation.setDuration(duration);
    view.startAnimation(animation);

}

2017-04-01 17:21:24

你不需要实现动画，你可以输入android:animateLayoutChanges="true" 以便每当子视图布局发生变化时，它将是动画……

2021-10-27 05:38:31

你可以稍微改变一下使用ViewPropertyAnimator。若要折叠，请将视图缩放到1像素的高度，然后隐藏它。展开，显示它，然后展开到它的高度。

private void collapse(final View view) {
    view.setPivotY(0);
    view.animate().scaleY(1/view.getHeight()).setDuration(1000).withEndAction(new Runnable() {
        @Override public void run() {
            view.setVisibility(GONE);
        }
    });
}

private void expand(View view, int height) {
    float scaleFactor = height / view.getHeight();

    view.setVisibility(VISIBLE);
    view.setPivotY(0);
    view.animate().scaleY(scaleFactor).setDuration(1000);
}

枢轴告诉视图从哪里开始缩放，默认是在中间。持续时间是可选的(默认= 1000)。你也可以设置插值器来使用，比如.setInterpolator(new accelerateeraderateinterpolator ())

2016-07-13 13:58:41

Android:展开/折叠动画

推荐文章

最新文章

标签