Android自定義View實現簡單水波紋效果

//這裡用的kotlin
//主執行緒重新整理控制元件
 val mHandler = object : Handler() {
        override fun handleMessage(msg: Message?) {
            waterRippleView.refreshView()
        }
    
//開啟動畫，開執行緒，延時重新整理period值，畫布進行x方向平移
private fun progressAdd() {
        isAnimate = true
        Thread(Runnable {
            while (isAnimate) {
                Thread.sleep(100)
                mHandler.sendEmptyMessage(0)
            }
        }).start()
    }

//停止動畫
    private fun progressReduce() {
        isAnimate = false
    }

//java編寫
public class WaterRippleView extends View {
    
    private float mWidth;
    private float mHeight;

    //總週期為2s
    private int CIRCLE_PERIOD = 2000;
    //振幅，波紋高度
    private float ampltitude = 100;
    //填充顏色
    private int paintColor = 0xff57c011;
    //當前時間值，累加並回圈
    private int period = 0;
    private Paint paint;
    private Path path;


    public WaterRippleView(Context context) {
        this(context, null);
    }

    public WaterRippleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaterRippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        paint = new Paint();
        paint.setColor(paintColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        path = new Path();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    public void refreshView() {
        period += 100;
        if (period > CIRCLE_PERIOD) period %= CIRCLE_PERIOD;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //週期性的移動畫布
        float offsetX = mWidth / CIRCLE_PERIOD * period;
        canvas.translate(-offsetX, 0);
        path.reset();
        //第一個正弦曲線
        path.moveTo(0, mHeight / 2);
        path.cubicTo(mWidth / 4, mHeight / 2 - ampltitude,
                mWidth * 3 / 4, mHeight / 2 + ampltitude, mWidth, mHeight / 2);

        //第二個正弦曲線
        path.cubicTo(mWidth * 5 / 4, mHeight / 2 - ampltitude,
                mWidth * 7 / 4, mHeight / 2 + ampltitude, 2 * mWidth, mHeight / 2);
        //形成閉合路徑
        path.lineTo(2 * mWidth, mHeight);
        path.lineTo(0, mHeight);
        path.lineTo(0, mHeight / 2);
        canvas.drawPath(path, paint);
    }
}