Question

我正在尝试实现上下滑动动画，如下所示： material banner animation gif（摘自Material Banner behavior）。

假设我的布局如下（简化）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    // View to animate
    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        // some views

    </LinearLayout>

    <Button
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toggle View" />

    // other views

</LinearLayout>

首先，为了使容器视图动画化，我尝试使用展开/折叠动画：

void collapse(final View view) {
    final int initialHeight = view.getMeasuredHeight();

    Animation animation = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (interpolatedTime == 1) {
                view.setVisibility(View.GONE);
            } else {
                view.getLayoutParams().height =
                        initialHeight - (int) (initialHeight * interpolatedTime);
                view.requestLayout();
            }
        }
    };
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(1000);
    view.startAnimation(animation);
}

void expand(final View view) {
    view.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    final int targetHeight = view.getMeasuredHeight();

    view.getLayoutParams().height = 0;
    view.setVisibility(View.VISIBLE);
    Animation animation = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            view.getLayoutParams().height =
                    interpolatedTime == 1 ? ViewGroup.LayoutParams.WRAP_CONTENT : (int) (
                            targetHeight * interpolatedTime);
            view.requestLayout();
        }
    };

    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(1000);
    view.startAnimation(animation);
}

但这看起来不像我所需要的。它只是调整视图的大小直到消失（看起来很难看，尤其是当该视图包含图像时）：expand/collapse anim demonstration。

然后我尝试使用TranslateAnimation：

void slideUp(final View view) {
    final int initialHeight = view.getMeasuredHeight();

    Animation animation = new TranslateAnimation(0, 0, 0, -initialHeight) {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            if (interpolatedTime == 1) {
                view.setVisibility(View.GONE);
            }
        }
    };
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(1000);
    view.startAnimation(animation);
}

private void slideDown(View view) {
    view.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    final int targetHeight = view.getMeasuredHeight();
    view.setY(-targetHeight);

    view.setVisibility(View.VISIBLE);
    Animation animation = new TranslateAnimation(0, 0, 0, targetHeight);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(1000);
    animation.setFillAfter(true);
    view.startAnimation(animation);
}

此动画将移动整个视图，而不是调整其大小，并且看起来几乎不错。但是其他视图（围绕容器的视图）直到调用view.setVisibility(...)时才随动画一起移动。在slide in动画之后，slide out动画的行为也很奇怪：slide anim demonstration。

我知道我可以与此容器一起制作其他视图的动画，但是如果我有很多视图，那是不可行的。应该有一些解决方案，我花了一些时间尝试解决这个问题，但是现在我坚持了下去。

如何获得与Google所示相同的动画？

任何帮助表示赞赏。谢谢。

上下滑动动画不会影响周围的视图

0 个答案: