Android材质设计如何实现以下动画？

Question

想在Android中实现这个动画。感谢任何帮助。

Answer 1

我还没有测试过这个，但它应该可以工作。

将此依赖项添加到您的应用程序gradle文件：编译'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;
    }
}

为reveal创建一个新的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>

希望这有帮助。