Android自定义view实现圆的扩散效果

<?xml version="1.0" encoding="utf-8"? 
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity" 

  <jt.com.animatorcirecle.myview.DiffuseView
    android:id="@+id/diffuseView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    app:diffuse_color="@color/colorAccent"
    app:diffuse_coreColor="@color/colorPrimaryDark"
    app:diffuse_coreImage="@android:drawable/ic_menu_search"
    app:diffuse_coreRadius="100"
    app:diffuse_maxWidth="300"
    app:diffuse_speed="5"
    app:diffuse_width="4"/ 

  <Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="开始扩散"/ 

  <Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="停止扩散"/ 
</LinearLayout 

public class MainActivity extends AppCompatActivity {
  private Button button;
  private Button button2;
  private DiffuseView diffuseView;


  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    button =  findViewById(R.id.button);
    button2 =  findViewById(R.id.button2);
    diffuseView = findViewById(R.id.diffuseView);

    button.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        diffuseView.start();
      }
    });

    button2.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        diffuseView.stop();
      }
    });
  }
}

public class DiffuseView extends View {
/** 扩散圆圈颜色 */
private int mColor = getResources().getColor(R.color.colorAccent);
/** 圆圈中心颜色 */
private int mCoreColor = getResources().getColor(R.color.colorPrimary);
/** 中心圆半径 */
private float mCoreRadius = 150;
/** 扩散圆宽度 */
private int mDiffuseWidth = 3;
/** 最大宽度 */
private Integer mMaxWidth = 255;
/** 扩散速度 */
private int mDiffuseSpeed = 5;
/** 是否正在扩散中 */
private boolean mIsDiffuse = false;
// 透明度集合
private List<Integer  mAlphas = new ArrayList< ();
// 扩散圆半径集合
private List<Integer  mWidths = new ArrayList< ();
private Paint mPaint;
public DiffuseView(Context context) {
this(context, null);
}
public DiffuseView(Context context, AttributeSet attrs) {
this(context, attrs, -1);
}
public DiffuseView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DiffuseView, defStyleAttr, 0);
mColor = a.getColor(R.styleable.DiffuseView_diffuse_color, mColor);
mCoreColor = a.getColor(R.styleable.DiffuseView_diffuse_coreColor, mCoreColor);
mCoreRadius = a.getFloat(R.styleable.DiffuseView_diffuse_coreRadius, mCoreRadius);
mDiffuseWidth = a.getInt(R.styleable.DiffuseView_diffuse_width, mDiffuseWidth);
mMaxWidth = a.getInt(R.styleable.DiffuseView_diffuse_maxWidth, mMaxWidth);
mDiffuseSpeed = a.getInt(R.styleable.DiffuseView_diffuse_speed, mDiffuseSpeed);
a.recycle();
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mAlphas.add(255);
mWidths.add(0);
}
@Override
public void invalidate() {
if(hasWindowFocus()){
super.invalidate();
}
}
@Override
public void onWindowFocusChanged(boolean hasWindowFocus) {
super.onWindowFocusChanged(hasWindowFocus);
if(hasWindowFocus){
invalidate();
}
}
@Override
public void onDraw(Canvas canvas) {
// 绘制扩散圆
mPaint.setColor(mColor);
for (int i = 0; i < mAlphas.size(); i ++) {
// 设置透明度
Integer alpha = mAlphas.get(i);
mPaint.setAlpha(alpha);
// 绘制扩散圆
Integer width = mWidths.get(i);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCoreRadius + width, mPaint);
if(alpha   0 && width < mMaxWidth){
mAlphas.set(i, alpha - mDiffuseSpeed   0 ? alpha - mDiffuseSpeed : 1);
mWidths.set(i, width + mDiffuseSpeed);
}
}
// 判断当扩散圆扩散到指定宽度时添加新扩散圆
if (mWidths.get(mWidths.size() - 1)  = mMaxWidth / mDiffuseWidth) {
mAlphas.add(255);
mWidths.add(0);
}
// 超过10个扩散圆，删除最外层
if(mWidths.size()  = 10){
mWidths.remove(0);
mAlphas.remove(0);
}
// 绘制中心圆
mPaint.setAlpha(255);
mPaint.setColor(mCoreColor);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, mCoreRadius, mPaint);
if(mIsDiffuse){
invalidate();
}
}
/**
* 开始扩散
*/
public void start() {
mIsDiffuse = true;
invalidate();
}
/**
* 停止扩散
*/
public void stop() {
mIsDiffuse = false;
mWidths.clear();
mAlphas.clear();
mAlphas.add(255);
mWidths.add(0);
invalidate();
}
/**
* 是否扩散中
*/
public boolean isDiffuse(){
return mIsDiffuse;
}
/**
* 设置扩散圆颜色
*/
public void setColor(int colorId){
mColor = colorId;
}
/**
* 设置中心圆颜色
*/
public void setCoreColor(int colorId){
mCoreColor = colorId;
}
/**
* 设置中心圆半径
*/
public void setCoreRadius(int radius){
mCoreRadius = radius;
}
/**
* 设置扩散圆宽度(值越小宽度越大)
*/
public void setDiffuseWidth(int width){
mDiffuseWidth = width;
}
/**
* 设置最大宽度
*/
public void setMaxWidth(int maxWidth){
mMaxWidth = maxWidth;
}
/**
* 设置扩散速度，值越大速度越快
*/
public void setDiffuseSpeed(int speed){
mDiffuseSpeed = speed;
}
}

<?xml version="1.0" encoding="utf-8"? 
<resources 
<!--扩散圆颜色-- 
<attr name="diffuse_color" format="color"/ 
<!--中心圆颜色-- 
<attr name="diffuse_coreColor" format="color"/ 
<!--中心圆图片-- 
<attr name="diffuse_coreImage" format="reference"/ 
<!--中心圆半径-- 
<attr name="diffuse_coreRadius" format="float"/ 
<!--扩散圆宽度,值越小越宽-- 
<attr name="diffuse_width" format="integer"/ 
<!--最大扩散宽度-- 
<attr name="diffuse_maxWidth" format="integer"/ 
<!--扩散速度，值越大越快-- 
<attr name="diffuse_speed" format="integer"/ 
<declare-styleable name="DiffuseView" 
<attr name="diffuse_color"/ 
<attr name="diffuse_coreColor"/ 
<attr name="diffuse_coreImage"/ 
<attr name="diffuse_coreRadius"/ 
<attr name="diffuse_width"/ 
<attr name="diffuse_maxWidth"/ 
<attr name="diffuse_speed"/ 
</declare-styleable 
</resources