Android实现自定义华丽的水波纹效果

先来看看效果

实现效果

模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明)

实现思路

1.自定义类继承View。

2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据。

3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心。

4.发送handler信息,对数据进行修改,刷新页面。

5.重写onDraw方法,绘制一个圆环。

1. 自定义类继承View

新建WaterWaveView2类继承View

public class WaterWaveView2 extends View {

  //存放圆环的集合
  private ArrayList<Wave> mList;

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

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

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

2. 定义实体类 Wave

/**
* Created by HongJay on 2016/8/30.
* 把wave的数据封装成一个对象
*/
public class Wave {
  public float x;//圆心x坐标
  public float y;//圆心y坐标
  public Paint paint; //画圆的画笔
  public float width; //线条宽度
  public int radius; //圆的半径
  public int ranNum;//随机数
  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();
  }
  /**
   * 初始化数据,每次点击一次都要初始化一次
   */
  private void initData() {
    paint=new Paint();//因为点击一次需要画出不同的圆环
    paint.setAntiAlias(true);//打开抗锯齿
    ranNum=(int) (Math.random()*6);//[0,5]的随机数
    paint.setColor(randomColor[ranNum]);//设置画笔的颜色
    paint.setStyle(Paint.Style.STROKE);//描边
    paint.setStrokeWidth(width);//设置描边宽度
    paint.setAlpha(255);//透明度的设置(0-255),0为完全透明
    radius=0;//初始化
    width=0;
  }
}

3. 重写onTouchEvent方法
获得圆心,并且删除集合中透明度为0的圆环,通知handler调用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;
  }
  //删除透明度已经为0的圆环
  private void deleteItem(){
    for (int i = 0; i <mList.size() ; i++) {
      if(mList.get(i).paint.getAlpha()==0){
        mList.remove(i);
      }
    }
  }
}

4. 重写onDraw()方法,循环绘制圆环

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

    //避免程序一运行就进行绘制
    if (mList.size() > 0) {

      //对集合中的圆环对象循环绘制
      for (Wave wave : mList) {
        canvas.drawCircle(wave.x, wave.y, wave.radius, wave.paint);
        wave.radius += 3;
        //对画笔透明度进行操作
        int alpha = wave.paint.getAlpha();
        if (alpha < 80) {
          alpha = 0;
        } else {
          alpha -= 3;
        }

        //设置画笔宽度和透明度
        wave.paint.setStrokeWidth(wave.radius / 8);
        wave.paint.setAlpha(alpha);

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

总结

以上就是Android实现自定义水波纹效果的全部内容,怎么样?实现的效果不错吧,感兴趣的小伙伴们快快自己动手实践起来,希望这篇文章对大家的学习和工作能有所帮助。

(0)

相关推荐

  • Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • Android实现水波纹效果

    一.效果 点击开始: 点击停止: 二.在MainActivity中 import android.graphics.Paint; import android.os.Bundle; import android.support.v4.view.animation.LinearOutSlowInInterpolator; import android.support.v7.app.AppCompatActivity; import android.view.View; import android

  • Android 自定义view实现水波纹动画效果

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个

  • Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • Android自定义view实现水波纹进度球效果

    今天我们要实现的这个view没有太多交互性的view,所以就继承view. 自定义view的套路,套路很深 1.获取我们自定义属性attrs(可省略) 2.重写onMeasure方法,计算控件的宽和高 3.重写onDraw方法,绘制我们的控件 这么看来,自定义view的套路很清晰嘛. 我们看下今天的效果图,其中一个是放慢的效果(时间调的长) 我们按照套路来. 一.自定义属性 <declare-styleable name="WaveProgressView"> <at

  • Android自定义View 实现水波纹动画引导效果

    一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

  • Android仿水波纹流量球进度条控制器

    仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

  • Android特效之水波纹的实现

    前言 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 "荡漾" 式 真实的水波纹效果,基于Bitmap处理式 话不多说,先来看看效果: 填充式水波纹,间距相等 非填充式水波纹,间距相等 非填充式水波纹,间距不断变大 填充式水波纹,间距不断变小 想必大家已经知道基本的原理了,就是用Canvas来画嘛,但可不是简单的画哦,请往下看. 分析 这种类型的水波纹,其实无非就是画圆而已,在给定的矩形中,一个个圆由最小半径扩大到最

  • Android实现兼容的水波纹效果

    先看看效果图 其实,要实现这一效果很简单,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的selector: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@c

  • Android自定义WaveProgressView实现水波纹加载需求

    先看效果图: 你可以定义成你项目的logo图片,可以设置水波颜色.波长.波宽.字体大小.颜色.进度条的最大值,当前进度值,还可以设置波纹震动的快慢.当设置一个进度不变的时候,打开时还有一个动画填满的效果(比如第二个流量显示,这里图片没有截出这个效果). 源码地址 1. 如何使用 1.1 在布局文件中 添加自定义控件: <cn.fanrunqi.waveprogressview.WaveProgressView android:id="@+id/waveProgressbar" a

随机推荐