Android實(shí)現(xiàn)自定義華麗的水波紋效果

更新時間：2016年08月31日 16:29:24 投稿：daisy

關(guān)于Android的水波紋效果小編之前給大家也分享幾篇類似的，有興趣可通過下面的相關(guān)文章進(jìn)行查看，今天給大家再分享一個華麗的水波紋效果，這個效果很不錯，感興趣的可以參考借鑒。

先來看看效果

實(shí)現(xiàn)效果

模擬水波紋的效果:點(diǎn)擊屏幕就有圓環(huán)出現(xiàn),半徑從小到大,透明度從大到小(0為透明)

實(shí)現(xiàn)思路

1.自定義類繼承View。

2.定義每個圓環(huán)的實(shí)體類 Wave，并初始化繪制圓環(huán)的畫筆的數(shù)據(jù)。

3.重寫onTouchEvent方法，down時，獲得坐標(biāo)點(diǎn)，做為圓環(huán)圓心。

4.發(fā)送handler信息，對數(shù)據(jù)進(jìn)行修改，刷新頁面。

5.重寫onDraw方法，繪制一個圓環(huán)。

1. 自定義類繼承View

新建WaterWaveView2類繼承View

public class WaterWaveView2 extends View {

  //存放圓環(huán)的集合
  private ArrayList<Wave> mList;

  //界面刷新
  private Handler mHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
      invalidate();//刷新界面,會執(zhí)行onDraw方法
    }
  };

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

  public WaterWaveView2(Context context, AttributeSet attrs) {
    super(context, attrs);
    mList = new ArrayList<Wave>();
  }

2. 定義實(shí)體類 Wave

/**
* Created by HongJay on 2016/8/30.
* 把wave的數(shù)據(jù)封裝成一個對象
*/
public class Wave {
  public float x;//圓心x坐標(biāo)
  public float y;//圓心y坐標(biāo)
  public Paint paint; //畫圓的畫筆
  public float width; //線條寬度
  public int radius; //圓的半徑
  public int ranNum;//隨機(jī)數(shù)
  public int[] randomColor={Color.BLUE,Color.CYAN,
      Color.GREEN,Color.MAGENTA,Color.RED,Color.YELLOW};

  public Wave(float x, float y) {
    this.x = x;
    this.y = y;
    initData();
  }
  /**
   * 初始化數(shù)據(jù),每次點(diǎn)擊一次都要初始化一次
   */
  private void initData() {
    paint=new Paint();//因?yàn)辄c(diǎn)擊一次需要畫出不同的圓環(huán)
    paint.setAntiAlias(true);//打開抗鋸齒
    ranNum=(int) (Math.random()*6);//[0,5]的隨機(jī)數(shù)
    paint.setColor(randomColor[ranNum]);//設(shè)置畫筆的顏色
    paint.setStyle(Paint.Style.STROKE);//描邊
    paint.setStrokeWidth(width);//設(shè)置描邊寬度
    paint.setAlpha(255);//透明度的設(shè)置(0-255),0為完全透明
    radius=0;//初始化
    width=0;
  }
}

3. 重寫onTouchEvent方法
獲得圓心，并且刪除集合中透明度為0的圓環(huán)，通知handler調(diào)用onDraw()方法

public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:

        float x = event.getX();
        float y = event.getY();
        deleteItem();
        Wave wave = new Wave(x, y);
        mList.add(wave);

        //刷新界面
        invalidate();
        break;

      case MotionEvent.ACTION_MOVE:
        float x1 = event.getX();
        float y1 = event.getY();
        deleteItem();
        Wave wave1 = new Wave(x1, y1);
        mList.add(wave1);

        invalidate();
        break;
    }
    //處理事件
    return true;
  }
  //刪除透明度已經(jīng)為0的圓環(huán)
  private void deleteItem(){
    for (int i = 0; i <mList.size() ; i++) {
      if(mList.get(i).paint.getAlpha()==0){
        mList.remove(i);
      }
    }
  }
}

4. 重寫onDraw()方法，循環(huán)繪制圓環(huán)

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //避免程序一運(yùn)行就進(jìn)行繪制
    if (mList.size() > 0) {

      //對集合中的圓環(huán)對象循環(huán)繪制
      for (Wave wave : mList) {
        canvas.drawCircle(wave.x, wave.y, wave.radius, wave.paint);
        wave.radius += 3;
        //對畫筆透明度進(jìn)行操作
        int alpha = wave.paint.getAlpha();
        if (alpha < 80) {
          alpha = 0;
        } else {
          alpha -= 3;
        }

        //設(shè)置畫筆寬度和透明度
        wave.paint.setStrokeWidth(wave.radius / 8);
        wave.paint.setAlpha(alpha);

        //延遲刷新界面
        mHandler.sendEmptyMessageDelayed(1, 100);
      }
    }
  }

總結(jié)

以上就是Android實(shí)現(xiàn)自定義水波紋效果的全部內(nèi)容，怎么樣？實(shí)現(xiàn)的效果不錯吧，感興趣的小伙伴們快快自己動手實(shí)踐起來，希望這篇文章對大家的學(xué)習(xí)和工作能有所幫助。

您可能感興趣的文章: