Android点击屏幕出现水波纹效果

在http://blog.csdn.net/poison_h/article/details/43635955这篇文章，介绍了如何给按钮设置水波纹效果。

可能有人会想到可不可以点击背景的时候也出现水波纹效果呢？其实当时我也是这样想的。没有想到Google下，还真的找到了，又一次站在了巨人的肩上。虽然是站在巨人的肩上，但是也要自己懂得才行，要转变自己得知识才是最棒的

好了，先看下效果图：



1.首先我们需要重写SurfaceView：

SurfaceView是视图(View)的继承类，这个视图里内嵌了一个专门用于绘制的Surface。你可以控制这个Surface的格式和尺寸。Surfaceview控制这个Surface的绘制位置。

surface是纵深排序(Z-ordered)的，这表明它总在自己所在窗口的后面。surfaceview提供了一个可见区域，只有在这个可见区域内 的surface部分内容才可见，可见区域外的部分不可见。surface的排版显示受到视图层级关系的影响，它的兄弟视图结点会在顶端显示。这意味者
surface的内容会被它的兄弟视图遮挡，这一特性可以用来放置遮盖物(overlays)(例如，文本和按钮等控件)。注意，如果surface上面 有透明控件，那么它的每次变化都会引起框架重新计算它和顶层控件的透明效果，这会影响性能。

你可以通过SurfaceHolder接口访问这个surface，getHolder()方法可以得到这个接口。

surfaceview变得可见时，surface被创建；surfaceview隐藏前，surface被销毁。这样能节省资源。如果你要查看 surface被创建和销毁的时机，可以重载surfaceCreated(SurfaceHolder)和 surfaceDestroyed(SurfaceHolder)。

surfaceview的核心在于提供了两个线程：UI线程和渲染线程。这里应注意：

1> 所有SurfaceView和SurfaceHolder.Callback的方法都应该在UI线程里调用，一般来说就是应用程序主线程。渲染线程所要访问的各种变量应该作同步处理。

2> 由于surface可能被销毁，它只在SurfaceHolder.Callback.surfaceCreated()和 SurfaceHolder.Callback.surfaceDestroyed()之间有效，所以要确保渲染线程访问的是合法有效的surface。

（1）、第一步在onSizeChanged（）方法中，设置背景图片，并且根据背景图片设置两个波能缓冲区大小，并初始化。

// 背景图
bgImage = BitmapFactory.decodeResource(this.getResources(), R.drawable.bg);
bgImage = Bitmap.createScaledBitmap(bgImage, w, h, false);// 缩放而已
backWidth = bgImage.getWidth();
backHeight = bgImage.getHeight();

buf2 = new short[backWidth * backHeight];
buf1 = new short[backWidth * backHeight];

bitmap2 = new int[backWidth * backHeight];
bitmap1 = new int[backWidth * backHeight];

// 将bgImage的像素拷贝到bitmap1数组中，用于渲染。。。
bgImage.getPixels(bitmap1, 0, backWidth, 0, 0, backWidth, backHeight);
bgImage.getPixels(bitmap2, 0, backWidth, 0, 0, backWidth, backHeight);

for (int i = 0; i < backWidth * backHeight; ++i)
{
buf2[i] = 0;
buf1[i] = 0;
}

2.计算波能数据缓冲区

while (i < loopTime)
{

// 波能扩散
buf2[k] = (short) (((buf1[k - 2] + buf1[k + 2] + buf1[k - doubleWidth] + buf1[k + doubleWidth]) >> 1) - buf2[k]);

// 波能衰减
buf2[k] = (short) (buf2[k] - (buf2[k] >> 5));

// 求出该点的左上的那个点xoff,yoff
cp = k - doubleWidth - 2;

xoff = buf2[cp - 2] - buf2[cp + 2];
yoff = buf2[cp - doubleWidth] - buf2[k - 2];

tarClr = k + yoff * doubleWidth + xoff;
if (tarClr > bitmapLen || tarClr < 0)
{
k += 2;
continue;
}
// 复制象素
bitmap2[k] = bitmap1[tarClr];
k += 2;
++i;
}

3.最后分别对move和down事件分别进行填充不同的波能缓冲池

// 产生波源，填充前导波能缓冲池
int endStoneX = x + stonesize;
int endStoneY = y + stonesize;
int squaSize = stonesize * stonesize;
int posy = y - stonesize;
int posx = x - stonesize;
for (posy = y - stonesize; posy < endStoneY; ++posy)
{
for (posx = x - stonesize; posx < endStoneX; ++posx)
{
if ((posx - x) * (posx - x) + (posy - y) * (posy - y) < squaSize)
{
buf1[backWidth * posy + posx] = (short) -stoneweight;
}
}
}

详细代码：

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class WaterWaveView extends SurfaceView implements SurfaceHolder.Callback
{
// 背景图的宽度和高度

private int backWidth;

private int backHeight;

/**
* buf1 和 buf2是波能缓冲区，分别代表了每个点的前一时刻和后一时刻的波幅数据
*/
private short[] buf1;
private short[] buf2;

private int[] bitmap1;
private int[] bitmap2;
private Bitmap bgImage = null;
// 是否第一次加载
private boolean firstLoad = false;

WavingThread wavingThread = new WavingThread();
// 显示一个surface的抽象接口，使你可以控制surface的大小和格式， 以及在surface上编辑像素，和监视surace的改变
SurfaceHolder mSurfaceHolder = null;

private int doubleWidth;

private int fiveWidth;
// 持续时间
private int loopTime;

private int bitmapLen;

public WaterWaveView(Context context)
{
super(context);
mSurfaceHolder = getHolder();
mSurfaceHolder.addCallback(this);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{

if (!firstLoad)
{
// 背景图
bgImage = BitmapFactory.decodeResource(this.getResources(), R.drawable.bg);
bgImage = Bitmap.createScaledBitmap(bgImage, w, h, false);// 缩放而已
backWidth = bgImage.getWidth();
backHeight = bgImage.getHeight();

buf2 = new short[backWidth * backHeight];
buf1 = new short[backWidth * backHeight];

bitmap2 = new int[backWidth * backHeight];
bitmap1 = new int[backWidth * backHeight];

// 将bgImage的像素拷贝到bitmap1数组中，用于渲染。。。
bgImage.getPixels(bitmap1, 0, backWidth, 0, 0, backWidth, backHeight);
bgImage.getPixels(bitmap2, 0, backWidth, 0, 0, backWidth, backHeight);

for (int i = 0; i < backWidth * backHeight; ++i)
{
buf2[i] = 0;
buf1[i] = 0;
}
doubleWidth = backWidth << 1;

fiveWidth = 5 * backWidth;

loopTime = ((backHeight - 4) * backWidth) >> 1;

bitmapLen = backWidth * backHeight - 1;

firstLoad = true;
}

}

class WavingThread extends Thread
{
boolean running = true;

public void setRunning(boolean running)
{
this.running = running;
}

@Override
public void run()
{
Canvas c = null;
while (running)
{
c = mSurfaceHolder.lockCanvas();
makeRipple();
doDraw(c);
mSurfaceHolder.unlockCanvasAndPost(c);
}
}
}

/*******************************************************
* 计算波能数据缓冲区
*******************************************************/
private void makeRipple()
{
int k = fiveWidth;
int xoff = 0, yoff = 0;
int cp = 0;

int tarClr = 0;
int i = fiveWidth;
while (i < loopTime)
{

// 波能扩散
buf2[k] = (short) (((buf1[k - 2] + buf1[k + 2] + buf1[k - doubleWidth] + buf1[k + doubleWidth]) >> 1) - buf2[k]);

// 波能衰减
buf2[k] = (short) (buf2[k] - (buf2[k] >> 5));

// 求出该点的左上的那个点xoff,yoff
cp = k - doubleWidth - 2;

xoff = buf2[cp - 2] - buf2[cp + 2];
yoff = buf2[cp - doubleWidth] - buf2[k - 2];

tarClr = k + yoff * doubleWidth + xoff;
if (tarClr > bitmapLen || tarClr < 0)
{
k += 2;
continue;
}
// 复制象素
bitmap2[k] = bitmap1[tarClr];
k += 2;
++i;
}
short[] tmpBuf = buf2;
buf2 = buf1;
buf1 = tmpBuf;

}

/*****************************************************
* 增加波源 x坐标 y坐标 波源半径 波源能量
*****************************************************/
private void touchWater(int x, int y, int stonesize, int stoneweight)
{
// 判断坐标是否在屏幕范围内
if (x + stonesize > backWidth)
{
return;
}
if (y + stonesize > backHeight)
{
return;
}
if (x - stonesize < 0)
{
return;
}
if (y - stonesize < 0)
{
return;
}
// 产生波源，填充前导波能缓冲池
int endStoneX = x + stonesize;
int endStoneY = y + stonesize;
int squaSize = stonesize * stonesize;
int posy = y - stonesize;
int posx = x - stonesize;
for (posy = y - stonesize; posy < endStoneY; ++posy)
{
for (posx = x - stonesize; posx < endStoneX; ++posx)
{
if ((posx - x) * (posx - x) + (posy - y) * (posy - y) < squaSize)
{
buf1[backWidth * posy + posx] = (short) -stoneweight;
}
}
}

}

/*****************************************************
* 增加波源 x坐标 y坐标 波源半径 波源能量
*****************************************************/
private void trickWater(int x, int y, int stonesize, int stoneweight)
{

// 判断坐标是否在屏幕范围内
if (x + stonesize > backWidth)
{
return;
}
if (y + stonesize > backHeight)
{
return;
}
if (x - stonesize < 0)
{
return;
}
if (y - stonesize < 0)
{
return;
}

// 产生波源，填充波能缓冲池
int endStoneX = x + stonesize;
int endStoneY = y + stonesize;
int posy = y - stonesize;
int posx = x - stonesize;
for (posy = y - stonesize; posy < endStoneY; ++posy)
{
for (posx = x - stonesize; posx < endStoneX; ++posx)
{
if (posy >= 0 && posy < backHeight && posx >= 0 && posx < backWidth)
{
buf1[backWidth * posy + posx] = (short) -stoneweight;
}
}
}

}

@Override
public boolean onTouchEvent(MotionEvent event)
{
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
// 设置波源半径和波源能量
touchWater((int) event.getX(), (int) event.getY(), 4, 160);
} else if (event.getAction() == MotionEvent.ACTION_MOVE)
{
trickWater((int) event.getX(), (int) event.getY(), 2, 64);
}
return true;
}

protected void doDraw(Canvas canvas)
{
/**
* Parameters: 1.colors 2.offset 3.stride 4.x 5. y 6.width 7.height
* 8.hasAlpha 9. paint
*/
//绘制
canvas.drawBitmap(bitmap2, 0, backWidth, 0, 0, backWidth, backHeight, false, null);

}

@Override
public void surfaceCreated(SurfaceHolder holder)
{
wavingThread.setRunning(true);
wavingThread.start();

}

@Override
public void surfaceDestroyed(SurfaceHolder holder)
{
boolean retry = true;
wavingThread.setRunning(false);
// 非暴力关闭线程，直到此次该线程运行结束之前，主线程停止运行，以防止Surface被重新激活
while (retry)
{
try
{
wavingThread.join(); // 阻塞current
// Thread(当前执行线程)直到被调用线程(thread)完成。
retry = false;
} catch (InterruptedException e)
{
}
}

}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height)
{
// TODO Auto-generated method stub

}

}

最后在我MainActivity中调用：

waterWaveView = new WaterWaveView(this);
setContentView(waterWaveView);