如何在Android Material Design中实现以下动画？

Question

希望在Android上实现这个动画。感谢任何帮助。

- ram

---

我认为这只是一个简单的带有“揭示效果”的翻译动画。http://developer.android.com/training/material/animations.html#Reveal - Rod_Algonquin

可能是如何使用Android活动转换动画来动画浮动操作按钮？的重复问题。 - Anirudha Agashe

Answer 1

我还没有测试过，但它应该能够工作。

将此依赖项添加到您的应用gradle文件中： compile 'com.github.ozodrukh:CircularReveal:1.1.1' 在您的活动开始时声明这些变量：

LinearLayout mRevealView;
boolean hidden = true;

在你的onCreate方法中添加以下内容：

mRevealView = (LinearLayout) findViewById(R.id.reveal_items);
mRevealView.setVisibility(View.INVISIBLE);

在您的FAB的onClick方法中，添加以下内容：

int cx = (mRevealView.getLeft() + mRevealView.getRight());
        int cy = mRevealView.getTop();
        int radius = Math.max(mRevealView.getWidth(), mRevealView.getHeight());

        //Below Android LOLIPOP Version
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            SupportAnimator animator =
                    ViewAnimationUtils.createCircularReveal(mRevealView, cx, cy, 0, radius);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            animator.setDuration(700);

            SupportAnimator animator_reverse = animator.reverse();

            if (hidden) {
                mRevealView.setVisibility(View.VISIBLE);
                animator.start();
                hidden = false;
            } else {
                animator_reverse.addListener(new SupportAnimator.AnimatorListener() {
                    @Override
                    public void onAnimationStart() {

                    }

                    @Override
                    public void onAnimationEnd() {
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;

                    }

                    @Override
                    public void onAnimationCancel() {

                    }

                    @Override
                    public void onAnimationRepeat() {

                    }
                });
                animator_reverse.start();
            }
        }
        // Android LOLIPOP And ABOVE Version
        else {
            if (hidden) {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, 0, radius);
                mRevealView.setVisibility(View.VISIBLE);
                anim.start();
                hidden = false;
            } else {
                Animator anim = android.view.ViewAnimationUtils.
                        createCircularReveal(mRevealView, cx, cy, radius, 0);
                anim.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        mRevealView.setVisibility(View.INVISIBLE);
                        hidden = true;
                    }
                });
                anim.start();
            }
        }

将此方法添加到您的活动中：

private void hideRevealView() {
    if (mRevealView.getVisibility() == View.VISIBLE) {
        mRevealView.setVisibility(View.INVISIBLE);
        hidden = true;
    }
}

创建一个新的xml布局用于展示，命名为reveal_layout.xml并添加以下内容：

<io.codetail.widget.RevealFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize">

    //You can include whatever layout you want here
    <include layout="@layout/layout_you_want_to_show" />

</io.codetail.widget.RevealFrameLayout>

为了使其正常工作，您必须将以下内容添加到您的活动布局的末尾：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include layout="@layout/reveal_layout" />

</FrameLayout>

希望这有所帮助。

- Steve C.