界面动画的循环展示

动画在某点向外扩散效果。
首先下如下代码：

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) {
        // 保存最开始的状态的参数
        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);
                // 动画结束之后，将 红圈再设回以前的参数
                ivRed.setLayoutParams(saveParams);
            }


            @Override
            public void onTransitionCancel(Transition transition) {

            }


            @Override
            public void onTransitionPause(Transition transition) {

            }


            @Override
            public void onTransitionResume(Transition transition) {

            }
        });
        // 保存 每个 View 当前的可见状态(Visibility)。很重要，它会时两个状态的控件中间出现动画效果
        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);
    }

再来看下面一个有趣的动画，将以控件内的所有组件循环展示：

<?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循环展示
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) {
                // 动画结束之后，让底部四个圆圈进入
                animateButtonsIn();
            }
        });
    }