如何在android材質設計中實現以下動畫？

Question

想在android.Appreciate任何幫助實現這個動畫。

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>

希望這可以幫助。