仿MIUI8挂断电话动画

 

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

 

先上效果图：

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

首先是添加引用：

[代码]xml代码：

?

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

布局文件：

[代码]xml代码：

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<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代码：

?

1 2 3 4

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

关键代码：

[代码]java代码：

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

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代码：

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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);     }

 

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

原文链接：http://www.apkbus.com/blog-625356-62452.html