前幾天公司需要做錄音的波紋效果，原理很簡單：定義一個記錄所有同心圓半徑的list,只要動態改變list的size，然後遍歷之，並以每一個半徑繪製圓(drawCircle)， 通過在onDraw方法裡面不停invalidate就可以了,程式碼如下：

package com.example.test.util;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;

import com.example.test.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by jisj on 6/1/16.
 */
public class RecordView extends View {
    public RecordView(Context context) {
        this(context, null, 0);
    }

    public RecordView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RecordView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }

    public void setIsWaving(boolean waving){
        isWaving = waving;
        postInvalidate();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.parseColor("#ff6666"));
        paint.setAntiAlias(true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(width = 600, height = 600);
        initOtherSize();
        initStartCircle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int count = radiusList.size();
        //先繪製波紋
        if(isWaving){
            for (int i = 0; i < count; i++) {
                int radius = radiusList.get(i);
                float alpha = alphaList.get(i);
                paint.setAlpha((int) alpha);
                canvas.drawCircle(width / 2, height / 2, radius, paint);
                //寬度遞增，透明度遞減，寬度到最大時，透明度正好為0，singleAlpha保證了最外層的圓消失時不會突兀
                if (alpha - singleAlpha >= 0)
                    alphaList.set(i, alpha - singleAlpha);
                if (radius + 1 < this.width / 2) {
                    radiusList.set(i, radius + 1);
                }
            }
        }

        //再繪製中間的圖片
        Drawable drawable = context.getResources().getDrawable(R.drawable.center_pic);
        drawable.setBounds((width - centerWidth) / 2, (height - centerWidth) / 2, (width + centerWidth) / 2, (height + centerWidth) / 2);
        drawable.draw(canvas);
        if(isWaving){
            //如果沒有達到最多的圓數，則加一個最內層的圓
            if (count <= MAX_CIRCLE_COUNT) {
                //這裡的width / (MAX_CIRCLE_COUNT * 7)是相鄰波紋的半徑差值
                if (radiusList.size() <= 0 || radiusList.get(radiusList.size() - 1) == centerWidth / 2 + width / (MAX_CIRCLE_COUNT * 7)) {
                    addInnerCircle();
                }
            }
            //去掉最外層的圓
            if (radiusList.size() > MAX_CIRCLE_COUNT) {
                radiusList.remove(0);
                alphaList.remove(0);
            }
            //執行onDraw的不斷迴圈
            postInvalidate();
        }
    }


    private void initStartCircle() {
        clearDataList(alphaList);
        clearDataList(radiusList);
        alphaList.add(ORIGIN_ALPHA);
        radiusList.add(startRadius);
    }

    private void initOtherSize() {
        centerWidth = (int) (width * 0.54f);
        //startRadius比centerWidth略小，是為了保證起始圓環出場時藏在中心圖片下面，不然會太突然
        startRadius = centerWidth / 2 - 30;
        //圓環每增加1個畫素，則透明度減低的值
        singleAlpha = ORIGIN_ALPHA / ((width / 2 - startRadius));
    }

    private void addInnerCircle() {
        alphaList.add(ORIGIN_ALPHA);
        radiusList.add(startRadius);
    }

    private void clearDataList(List list) {
        if (list.size() > 0)
            list.clear();
    }

    private ArrayList<Float> alphaList = new ArrayList<Float>();
    private ArrayList<Integer> radiusList = new ArrayList<Integer>();

    private int width, height;
    private float singleAlpha = 1;                      //圓環每增加1個畫素，則透明度減低的值
    private int centerWidth;                            //中間固定圖片的半徑
    private int startRadius;                            //起始圓環的半徑
    private boolean isWaving = false;
    private Paint paint;
    private Context context;

    private static final float ORIGIN_ALPHA = 150;      //最內層圓環的透明度
    private static final int MAX_CIRCLE_COUNT = 5;      //最多的圓環數量

}