動畫在某點向外擴散效果。
首先下如下代碼：

private Animator animateRevealColorFromCoordinates(ViewGroup viewRoot, @ColorRes int color, int x, int y) {
        float finalRadius = (float) Math.hypot(viewRoot.getWidth(), viewRoot.getHeight());

        Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, x, y, 0, finalRadius);
        viewRoot.setBackgroundColor(ContextCompat.getColor(this, color));
        anim.setDuration(500);
        anim.setInterpolator(new AccelerateDecelerateInterpolator());
        anim.start();
        return anim;
    }

viewRoot界面布局，color為顏色，x，y為擴散點
如需要在界面中間擴散，代碼如下：

   private void animateRevealColor(ViewGroup viewRoot, @ColorRes int color) {
        int cx = (viewRoot.getLeft() + viewRoot.getRight()) / 2;
        int cy = (viewRoot.getTop() + viewRoot.getBottom()) / 2;
        animateRevealColorFromCoordinates(viewRoot, color, cx, cy);
    }

接下來，我們在它擴散前加入提升效果，代碼如下：

private void revealRed(final ViewGroup viewRoot, final ImageView ivRed) {
        // 保存最開始的狀態(tài)的參數(shù)
        final ViewGroup.LayoutParams saveParams = ivRed.getLayoutParams();
        Transition transition = TransitionInflater.from(this).inflateTransition(R.transition
                .changebounds_with_arcmotion);
        transition.addListener(new Transition.TransitionListener() {
            @Override
            public void onTransitionStart(Transition transition) {

            }


            @Override
            public void onTransitionEnd(Transition transition) {
                animateRevealColor(viewRoot, R.color.red);
                // 動畫結(jié)束之后，將 紅圈再設(shè)回以前的參數(shù)
                ivRed.setLayoutParams(saveParams);
            }


            @Override
            public void onTransitionCancel(Transition transition) {

            }


            @Override
            public void onTransitionPause(Transition transition) {

            }


            @Override
            public void onTransitionResume(Transition transition) {

            }
        });
        // 保存 每個 View 當前的可見狀態(tài)(Visibility)。很重要，它會時兩個狀態(tài)的控件中間出現(xiàn)動畫效果
        TransitionManager.beginDelayedTransition(viewRoot, transition);

        // 移動紅圈到中央
        RelativeLayout.LayoutParams layoutParams1 = new RelativeLayout.LayoutParams(5, 5);
        layoutParams1.addRule(RelativeLayout.CENTER_IN_PARENT);
        ivRed.setLayoutParams(layoutParams1);
    }

如果想在點擊處向外擴散，代碼如下：

findViewById(R.id.square_yellow).setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    if (v.getId() == R.id.square_yellow) {
                        revealYellow(event.getRawX(), event.getRawY());
                    }
                }
                return false;
            }
        });

    private void revealYellow(float x, float y) {
        animateRevealColorFromCoordinates(root, R.color.yellow, (int) x, (int) y);
    }

再來看下面一個有趣的動畫，將以控件內(nèi)的所有組件循環(huán)展示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/reveal_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/square_green"
        android:layout_alignParentBottom="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:alpha="0"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:background="@color/theme_green_primary"/>

    <ImageView
        android:id="@+id/square_red"
        android:layout_alignParentBottom="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:alpha="0"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:layout_toRightOf="@id/square_green"
        android:background="@color/theme_red_primary"/>
    <ImageView
        android:id="@+id/square_yellow"
        android:layout_alignParentBottom="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="10dp"
        android:alpha="0"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:layout_toRightOf="@id/square_red"
        android:background="@color/theme_yellow_primary"/>
    <ImageView
        android:id="@+id/square_blue"
        android:layout_alignParentBottom="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:alpha="0"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:layout_toRightOf="@id/square_yellow"
        android:background="@color/theme_blue_primary"/>

</RelativeLayout>

private void animateButtonsIn() {
        for (int i = 0; i < root.getChildCount(); i++) {
            View view = root.getChildAt(i);
            view.animate().setStartDelay(100 + i * DELAY).setInterpolator(interpolator).alpha(1).scaleX(1).scaleY(1);
        }
    }

頂部中簡擴散后，imageview循環(huán)展示
private void revealBlue() {
        animateButtonsOut();//  先讓底部四個圓圈消失

        Animator animator = animateRevealColorFromCoordinates(root, R.color.blue, root.getWidth() / 2, 0);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 動畫結(jié)束之后，讓底部四個圓圈進入
                animateButtonsIn();
            }
        });
    }