今天介紹Android中兩種實現紋波效果的方式。

一. 使用ViewAnimationUtils類

1.通過查看ViewAnimationUtils類源碼發現該類只有一個靜態方法：

靜態方法

2.靜態方法中各個參數的含義：

參數含義

• view：使用紋波效果的視圖對象
• centerX：圓心的x軸坐標，相對于view
• centerY：圓形的Y軸坐標，相對于view
• startRadius：圓的開始半徑
• endRadius：圓的結束半徑

3.ViewAnimationUtils類是從API level 21引入的，因此在使用的時候需要首先判斷手機的版本號，然后再執行紋波動畫。下面以點擊一個Button為例，演示通過ViewAnimationUtils類實現的紋波效果：

布局文件activity.xml

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

    <Button        
       android:id="@+id/view"        
       android:layout_width="250dp"        
       android:layout_height="150dp"
       android:layout_gravity="center_horizontal"
       android:text="Button"/>
</LinearLayout>

MainActivity.java

package rich.ivan.testa;

import android.animation.Animator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateInterpolator;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnTouchListener {
  private int mRawX;   
  private int mRawY;    

  @Override    
  protected void onCreate(Bundle savedInstanceState) {             
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);        
    Button button = (Button) findViewById(R.id.view);
    button.setOnClickListener(this);        
    button.setOnTouchListener(this);    
  }    

  @Override    
  public void onClick(final View view) {        
    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {            
      Animator animator = ViewAnimationUtils.createCircularReveal(                
          view,                    
          mRawX,                    
          mRawY,                    
          0,                    
          Math.max(view.getWidth(), view.getHeight()));

      animator.setDuration(2000);            
      animator.setInterpolator(new AccelerateInterpolator());        

      animator.addListener(new Animator.AnimatorListener() {                   
        @Override                
        public void onAnimationStart(Animator animation) {}           
     
        @Override                
        public void onAnimationEnd(Animator animation) {}                
      
        @Override                
        public void onAnimationCancel(Animator animation) {}                

        @Override                
        public void onAnimationRepeat(Animator animation) {}            
      });            
    
      animator.start();        
    }    
  }    

  @Override    
  public boolean onTouch(View v, MotionEvent event) {        
    switch (event.getAction()) {            
      case MotionEvent.ACTION_DOWN:                
        mRawX = (int) event.getX();                
        mRawY = (int) event.getY();        
    }        

    return false;    
  }
}

4.點擊按鈕顯示紋波效果：

按鈕紋波效果圖

5.我們發現使用這種方式創建紋波效果時，動畫開始時整個Button被覆蓋了，隨著紋波的擴散逐漸顯示出來，這就是使用ViewAnimationUtils類創建紋波的特征，View會被先覆蓋掉。

二. 通過xml文件配置

1.因為紋波效果在API 21以后才引入，所以首先在res目錄下創建drawable-v21資源目錄，然后在該目錄下新建ripple_effect.xml文件：

ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"         
        android:color="@color/colorPrimary">    
    <item>        
        <shape android:shape="rectangle">            
            <solid android:color="#FFFFFF"/>        
        </shape>    
    </item>
</ripple>

2.設置Button控件的屬性：android:background="@drawable/ripple_effect"

activity_main_test.xml

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

    <Button        
       android:id="@+id/view"        
       android:layout_width="250dp"        
       android:layout_height="150dp"
       android:layout_gravity="center_horizontal"
       android:background="@drawable/ripple_effect"
       android:text="Button"/>
</LinearLayout>

3.修改MainActivity.java中引用的布局文件，同時刪除ViewAnimationUtils創建動畫部分的代碼（這里不再貼出代碼）。

setContentView(R.layout.activity_main_test);

4.實現效果圖：

效果圖

5.使用這種方式繪制紋波效果時系統不會先覆蓋原來的View，而是在原來的View上面繪制圓形，在繪制紋波時保證了原來的View也能正常顯示。