今天我们来介绍下Material Design按钮自带的一些动画：水波纹与揭露效果。

源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/11088325

1. 水波纹效果

1.1  布局文件

  

   

    

     

    
    

     

      <?xml version="1.0" encoding="utf-8"?>
     
    
   

    

     

    
    

     

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
    
   

    

     

    
    

     
 xmlns:tools="http://schemas.android.com/tools"
     
    
   

    

     

    
    

     
 android:layout_width="match_parent"
     
    
   

    

     

    
    

     
 android:layout_height="match_parent"
     
    
   

    

     

    
    

     
 android:gravity="center_horizontal"
     
    
   

    

     

    
    

     
 android:orientation="vertical"
     
    
   

    

     

    
    

     
 android:paddingBottom="@dimen/activity_vertical_margin"
     
    
   

    

     

    
    

     
 android:paddingLeft="@dimen/activity_horizontal_margin"
     
    
   

    

     

    
    

     
 android:paddingRight="@dimen/activity_horizontal_margin"
     
    
   

    

     

    
    

     
 android:paddingTop="@dimen/activity_vertical_margin"
     
    
   

    

     

    
    

     
 tools:context=".LoginActivity">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <Button
     
    
   

    

     

    
    

     
 android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
 android:layout_height="100dp"
     
    
   

    

     

    
    

     
 android:text="按钮默认自带水波纹" />
     
    
   

    

     

    
    

     
 <TextView
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
 android:layout_height="100dp"
     
    
   

    

     

    
    

     
 android:clickable="true"
     
    
   

    

     

    
    

     
 android:background="?attr/selectableItemBackground"
     
    
   

    

     

    
    

     
 android:text="TextView设置clikable后自带水波纹" />
     
    
   

    

     

    
    

     
 <Button
     
    
   

    

     

    
    

     
 android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
 android:layout_height="100dp"
     
    
   

    

     

    
    

     
 android:background="?attr/selectableItemBackgroundBorderless"
     
    
   

    

     

    
    

     
 android:text="无边界水波纹" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <Button
     
    
   

    

     

    
    

     
 android:id="@+id/btReveal"
     
    
   

    

     

    
    

     
 android:layout_width="wrap_content"
     
    
   

    

     

    
    

     
 android:layout_height="100dp"
     
    
   

    

     

    
    

     
 android:text="揭露效果" />
     
    
   

    

     

    
    

     

      </LinearLayout>
     
    
  
 

第一个Button默认水波纹效果，第二个Textview需要设置clickable=true才能显示水波纹效果，第三个Button设置backgound来实现无边界水波纹效果。第四个Button id=btReveal将在第2节揭露效果里展示。

目前的运行效果图是：

其中按钮的默认颜色与水波纹颜色可以在style中自定义colorControlHighLight与colorButtonNormal.

  

   

    

     

    
    

     
 <!-- Base application theme. -->
     
    
   

    

     

    
    

     
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     
    
   

    

     

    
    

     
 <!-- Customize your theme here. -->
     
    
   

    

     

    
    

     
 <item name="colorPrimary">@color/colorPrimary</item>
     
    
   

    

     

    
    

     
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     
    
   

    

     

    
    

     
 <item name="colorAccent">@color/colorAccent</item>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <item name="colorControlHighlight">@color/colorPrimary</item>
     
    
   

    

     

    
    

     
 <item name="colorButtonNormal">@color/material_blue_grey_800</item>
     
    
   

    

     

    
    

     
 </style>
     
    
  
 

2. 揭露效果

  

   

    

     

    
    

     

      package com.example.myapplication
     
    
   

    

     

    
    

     

      import android.support.v7.app.AppCompatActivity
     
    
   

    

     

    
    

     

      import android.os.Bundle
     
    
   

    

     

    
    

     

      import android.view.View
     
    
   

    

     

    
    

     

      import android.view.ViewAnimationUtils
     
    
   

    

     

    
    

     

      import android.view.animation.AccelerateInterpolator
     
    
   

    

     

    
    

     

      import android.widget.Toast
     
    
   

    

     

    
    

     

      import kotlinx.android.synthetic.main.activity_login.*
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      class MainActivity : AppCompatActivity(){
     
    
   

    

     

    
    

     
 override fun onCreate(savedInstanceState: Bundle?) {
     
    
   

    

     

    
    

     

       super.onCreate(savedInstanceState)
     
    
   

    

     

    
    

     

       setContentView(R.layout.activity_login)
     
    
   

    

     

    
    

     

       btReveal.setOnClickListener(View.OnClickListener {
     
    
   

    

     

    
    

     

       Toast.makeText(this,"揭露",Toast.LENGTH_SHORT).show();
     
    
   

    

     

    
    

     

       var animator = ViewAnimationUtils.createCircularReveal(btReveal, 0, 0, 0f,
     
    
   

    

     

    
    

     

       Math.hypot(btReveal.getWidth().toDouble(), btReveal.getHeight().toDouble()).toFloat()
     
    
   

    

     

    
    

     

       );
     
    
   

    

     

    
    

     

      			animator.setDuration(1000);
     
    
   

    

     

    
    

     

      			animator.setInterpolator( AccelerateInterpolator());
     
    
   

    

     

    
    

     

      			animator.start();
     
    
   

    

     

    
    

     
 /*从按钮中心开始揭露START
     
    
   

    

     

    
    

     

       var animator1 = ViewAnimationUtils.createCircularReveal(btReveal, btReveal.getWidth()/2, btReveal.getHeight()/2,
     
    
   

    

     

    
    

     

       0F,
     
    
   

    

     

    
    

     

       btReveal.getHeight().toFloat()
     
    
   

    

     

    
    

     

       );
     
    
   

    

     

    
    

     

       animator1.setDuration(1000);
     
    
   

    

     

    
    

     

       animator1.setInterpolator( AccelerateInterpolator());
     
    
   

    

     

    
    

     

       animator1.start();从按钮中心开始揭露END*/
     
    
   

    

     

    
    

     

       })
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     

      }
     
    
  
 

我们为btReveal定义一个单击函数，然后执行一个揭露动画。使用ViewAnimationUtils调用createCircualReveal来实现一个圆形揭露动画，我们来看一下这个函数的参数：

createCircularReveal(btReveal, 0, 0, 0f,
                Math.hypot(btReveal.getWidth().toDouble(), btReveal.getHeight().toDouble()).toFloat()
            );

第一个参数：btReveal为要显示揭露动画的控件；

第二个参数与第三个参数（0,0）是圆心，这里以按钮的左上角为圆心进行扩散。

第三个参数是，揭露的起始半径。

第四个参数是，揭露的最大半径。

文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/89018248