【Android动画】仿MIUI8挂断电话动画

用过MIUI8的都大概留意到了这个动画，看着很炫，于是花了一天时间做了个。

先上效果图：

整个动画可以分成2部分，第1部分是个类似于波纹的动画，让他反过来就可以了。这里用到了CardView,CardView是5.0新增的控件，继承与FrameLayout。

首先是添加引用：

[代码]xml代码：

compile 'com.android.support:cardview-v7:24.1.1'

布局文件：

[代码]xml代码：

 <android.support.v7.widget.CardView
        android:id="@+id/cardview_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardElevation="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/iv_img"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="50dp" />

            <Button
                android:id="@+id/btn_start"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="50dp"
                android:text="开始" />
        </RelativeLayout>


    </android.support.v7.widget.CardView>

初始化：

[代码]java代码：

 cardview_1 = (CardView) findViewById(R.id.cardview_1);
 cardview_1.setBackgroundColor(Color.BLACK);
        //设置波浪颜色
 cardview_1.setCardBackgroundColor(Color.parseColor("#000000"));

关键代码：

[代码]java代码：

private void startAnimation(View view) {
        //置回初始状态
        cardview_1.setCardBackgroundColor(Color.parseColor("#000000"));
        cardview_1.setBackgroundColor(Color.BLACK);

        //因为CircularReveal动画是api21之后才有的,所以加个判断语句,免得崩溃
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            int cicular_R = view.getHeight() / 2 > view.getWidth() / 2 ? view.getHeight() : view.getWidth();
            // 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
            int[] start_location = new int[2];
            // 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
            iv_img.getLocationInWindow(start_location);
            int width = iv_img.getWidth();
            int height = iv_img.getHeight();
            // view 操作的视图
            // centerX 动画开始的中心点X
            // centerY 动画开始的中心点Y
            // startRadius 动画开始半径
            // startRadius 动画结束半径
            Animator animator = ViewAnimationUtils.createCircularReveal(cardview_1,
                    start_location[0] + width / 2, start_location[1] + height / 2, cicular_R, width);
            animator.setInterpolator(new LinearInterpolator());
            animator.setDuration(300);
            animator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    cardview_1.setBackgroundColor(Color.WHITE);
                    //移除屏幕
                    removeWindow();
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });
            animator.start();
        } else {
            Toast.makeText(this, "SDK版本太低,请升级", Toast.LENGTH_SHORT).show();
        }

    }

第二部分是个位移动画

[代码]java代码：

private void removeWindow() {
        int[] start_location = new int[2];
        // 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
        iv_img.getLocationInWindow(start_location);
        int starty = start_location[1] + iv_img.getHeight();


        TranslateAnimation animation = new TranslateAnimation(0, 0, start_location[1] - iv_img.getHeight() / 2, -starty);
        animation.setDuration(200);
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                cardview_1.setVisibility(View.GONE);
                btn_again.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        iv_img.startAnimation(animation);
    }

你的认可，是我坚持更新博客的动力，如果觉得有用，就请点个赞，谢谢