自定义View,动态波纹效果

1. 效果图：
   

2. 实现原理：先画出一个波形，不断地改变波形的颜色透明度和半径达到视觉上的动态效果。直接上代码

3. 自定义的WaterView

package com.example.customwaterview;

import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;

public class WaterView extends View {

    //画笔
    private Paint mPaint;
    //波形的最大半径
    private float mWaveMaxRadio;
    //波形移动的速度
    private float mWaveSpeed;
    //波形起始宽度
    private float mWaveStartWidth;
    //波形终止宽度
    private float mWaveEndWidth;
    //波形的颜色
    private int mWaveColor;
    //两波形之间的间距
    private float mWaveIntervalSize;
    //波集合
    List<Wave> mWaveList;
    /**渐变控制器 */
    private Interpolator interpolator = new LinearInterpolator();
    //波纹状态
    private boolean isStart = false;
    //中心坐标
    private float mViewCenterX;
    private float mViewCenterY;


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

    public WaterView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public WaterView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        mPaint = new Paint();
        mWaveList = new ArrayList<>();
        setWaveInfo(60f, 1f, 3f, 8f, Color.RED);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isStart) {
            //更新波的属性
            updateWaveAttr();
        }
        //画出所有波形
        for (Wave w : mWaveList) {
            mPaint.setColor(w.color);
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Style.STROKE);
            mPaint.setStrokeWidth(w.width);// 设置线宽度
            canvas.drawCircle(mViewCenterX, mViewCenterY, w.radius, mPaint);
        }
        //延时10ms刷新
        postInvalidateDelayed(10);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        // 设置中心坐标
        mViewCenterX = getWidth() / 2;
        mViewCenterY = getHeight() / 2;
        //设置最大波半径
        mWaveMaxRadio = Math.min(mViewCenterX, mViewCenterY);
    }

    /**
     * 启动波纹
     */
    public void startWave() {
        this.isStart = true;
    }
    /**
     * 停止波纹
     */
    public void stopWave() {
        this.isStart = false;
        resetWave();
    }

    /**
     * 重置波纹
     */
    public void resetWave() {
        mWaveList.clear();
    }
    /**
     * 更新波的半径、宽度、颜色属性，达到视觉动态移动效果
     */
    private void updateWaveAttr() {
        Wave nearestWave = mWaveList.isEmpty() ? null : mWaveList.get(0);
        if (nearestWave == null || nearestWave.radius >= mWaveIntervalSize) {// 控制两个波形之间的间隔
            //将元素添加到List的第一个，其他元素往后移
            mWaveList.add(0, new Wave());
        }
        int size = mWaveList.size();
        for (int i = 0; i < size; i++) {
            Wave w = mWaveList.get(i);
            float rP = w.radius / mWaveMaxRadio;
            if (rP > 1f) {
                rP = 1f;
            }
            float factor = interpolator.getInterpolation(1 - rP);
            //半径递增
            w.radius += mWaveSpeed;
            //宽度渐变
            w.width = mWaveStartWidth + mWaveEndWidth*rP;
            //颜色渐变
            w.color = mWaveColor & 0x00FFFFFF
                    | ((int) (255 * factor) << 24);
        }
        //移除超出最大半径的波
        Wave farthestWave = mWaveList.get(size - 1);
        if (farthestWave.radius > mWaveMaxRadio + farthestWave.width) {
            mWaveList.remove(size - 1);
        }
    }


    /**
     * 设置波形属性
     * 
     * @param intervalSize
     *            两个波形之间的间距
     * @param stireStep
     *            波形移动速度
     * @param startWidth
     *            起始波形宽度
     * @param endWidth
     *            终止波形宽度
     * @param color
     *            波形颜色
     */
    public void setWaveInfo(float intervalSize, float stireStep,
            float startWidth, float endWidth, int color) {
        mWaveIntervalSize = intervalSize;
        mWaveSpeed = stireStep;
        mWaveStartWidth = startWidth;
        mWaveEndWidth = endWidth;
        mWaveColor = color;
    }


    /**
     * 波
     * @author FLST-YF-ZZW
     *
     */
    public class Wave {
        public float radius;// 半径
        public float width;// 波宽
        public int color;// 颜色

        public Wave() {
            radius = 0;
            width = mWaveStartWidth;
            color = mWaveColor;
        }

        public float getRadius() {
            return radius;
        }

        public void setRadius(float radius) {
            this.radius = radius;
        }

    }

}

4.MainActivity就是几个Button的监听事件

package com.example.customwaterview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

    //自定义的WaterView
    WaterView mWaterView;
    Button mbtnStart,mbtnStop,mbtnReset;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setListener();
    }

    private void initView() {
        mWaterView = (WaterView) findViewById(R.id.cwv);
        mbtnStart = (Button) findViewById(R.id.btnStart);
        mbtnStop = (Button) findViewById(R.id.btnStop);
        mbtnReset = (Button) findViewById(R.id.btnReset);
    }

    private void setListener() {
        mbtnStart.setOnClickListener(this);
        mbtnStop.setOnClickListener(this);
        mbtnReset.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btnStart:
            mWaterView.startWave();
            break;
        case R.id.btnStop:
            mWaterView.stopWave();      
            break;
        case R.id.btnReset:
            mWaterView.resetWave();
            break;
        }

    }
}

布局文件：

<RelativeLayout 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"
    >

    <com.example.customwaterview.WaterView 
        android:id="@+id/cwv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/btnStart"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="启动波纹"
            />
        <Button 
            android:id="@+id/btnStop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="停止波纹"
            />
        <Button 
            android:id="@+id/btnReset"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="重置波纹"
            />
    </LinearLayout>

</RelativeLayout>


源码下载：

> http://download.csdn.net/detail/wujiewei2342/9405776