浪起来!使用 drawBitmapMesh 实现仿真水波纹效果
2017-04-22 20:41
393 查看
在 Android 的画布 Canvas 里面有个 drawBitmapMesh 方法,通过它可以实现对 Bitmap 的各种扭曲。我们试一下用它把图像扭出水波纹的效果。
和 Material Design 里扁平化的水波纹不同,这里是通过对图像的处理,模拟真实的水波纹效果,最后实现的效果如下:
drawBitmapMesh 简介
我们先了解一下「网格」的概念。将一个图片横向、纵向均匀切割成 n 份,就会形成一个「网格」,我把所有网格线的交点称为「顶点」。
正常情况下,顶点是均匀分布的。当我们改变了顶点的位置时,系统会拿偏移后的顶点坐标,和原来的坐标进行对比,通过一套算法,将图片进行扭曲,像这样:
接下来看看 drawBitmapMesh 方法:
public void drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint)
它的参数如下:
bitmap - 需要转换的位图
meshWidth - 横向的格数,需大于 0
meshHeight - 纵向的格数,需大于 0
verts - 网格顶点坐标数组,记录扭曲后图片各顶点的坐标,数组大小为 (meshWidth+1) * (meshHeight+1) * 2 + vertOffset
vertOffset - 从第几个顶点开始对位图进行扭曲,通常传 0
colors - 设置网格顶点的颜色,该颜色会和位图对应像素的颜色叠加,数组大小为 (meshWidth+1) * (meshHeight+1) + colorOffset,可以传 null
colorOffset - 从第几个顶点开始转换颜色,通常传 0
paint - 「画笔」,可以传 null
需要说明一下的是,可以用 colors 这个参数来实现阴影的效果,但在 API 18 以下开启了硬件加速,colors 这个参数是不起作用的。我们这里只关注前面四个参数,后面四个传 0、null、0、null 就可以了。
创建 RippleLayout
创建自定义控件 RippleLayout,为了让控件用起来更灵活,我让它继承了 FrameLayout(套上哪个哪个浪!)。定义了如下成员变量:
//图片横向、纵向的格数 private final int MESH_WIDTH = 20; private final int MESH_HEIGHT = 20; //图片的顶点数 private final int VERTS_COUNT = (MESH_WIDTH + 1) * (MESH_HEIGHT + 1); //原坐标数组 private final float[] staticVerts = new float[VERTS_COUNT * 2]; //转换后的坐标数组 private final float[] targetVerts = new float[VERTS_COUNT * 2]; //当前控件的图片 private Bitmap bitmap; //水波宽度的一半 private float rippleWidth = 100f; //水波扩散速度 private float rippleSpeed = 15f; //水波半径 private float rippleRadius; //水波动画是否执行中 private boolean isRippling;
看注释就知道什么意思啦,下面会用到的。
然后又定义了一个这里会经常用到的方法,根据宽高计算对角线的距离(勾股定理):
/** * 根据宽高,获取对角线距离 * * @param width 宽 * @param height 高 * @return 距离 */ private float getLength(float width, float height) { return (float) Math.sqrt(width * width + height * height); }
获取 Bitmap
要处理 Bitmap,第一步当然是先拿到 Bitmap,拿到后就可以根据 Bitmap 的宽高初始化两个顶点坐标数组:/** * 初始化 Bitmap 及对应数组 */ private void initData() { bitmap = getCacheBitmapFromView(this); if (bitmap == null) { return; } float bitmapWidth = bitmap.getWidth(); float bitmapHeight = bitmap.getHeight(); int index = 0; for (int height = 0; height <= MESH_HEIGHT; height++) { float y = bitmapHeight * height / MESH_HEIGHT; for (int width = 0; width <= MESH_WIDTH; width++) { float x = bitmapWidth * width / MESH_WIDTH; staticVerts[index * 2] = targetVerts[index * 2] = x; staticVerts[index * 2 + 1] = targetVerts[index * 2 + 1] = y; index += 1; } } } /** * 获取 View 的缓存视图 * * @param view 对应的View * @return 对应View的缓存视图 */ private Bitmap getCacheBitmapFromView(View view) { view.setDrawingCacheEnabled(true); view.buildDrawingCache(true); final Bitmap drawingCache = view.getDrawingCache(); Bitmap bitmap; if (drawingCache != null) { bitmap = Bitmap.createBitmap(drawingCache); view.setDrawingCacheEnabled(false); } else { bitmap = null; } return bitmap; }
计算偏移坐标
接下来是重点了。这里要实现的水波的位置在下图的灰色区域:我定义了一个 warp 方法,根据手指按下的坐标(原点)来重绘 Bitmap:
/** * 图片转换 * * @param originX 原点 x 坐标 * @param originY 原点 y 坐标 */ private void warp(float originX, float originY) { for (int i = 0; i < VERTS_COUNT * 2; i += 2) { float staticX = staticVerts[i]; float staticY = staticVerts[i + 1]; float length = getLength(staticX - originX, staticY - originY); if (length > rippleRadius - rippleWidth && length < rippleRadius + rippleWidth) { PointF point = getRipplePoint(originX, originY, staticX, staticY); targetVerts[i] = point.x; targetVerts[i + 1] = point.y; } else { //复原 targetVerts[i] = staticVerts[i]; targetVerts[i + 1] = staticVerts[i + 1]; } } invalidate(); }
方法里面遍历了所有的顶点,如果顶点是在水波范围内,则需要对这个顶点进行偏移。
偏移后的坐标计算,思路大概是这样的:
为了让水波有突起的感觉,以水波中间(波峰)为分界线,里面的顶点往里偏移,外面的顶点往外偏移:
至于偏移的距离,我想要实现类似放大镜的效果,离波峰越近的顶点,偏移的距离会越大。离波峰的距离和偏移距离的关系,可以看作一个余弦曲线:
我们来看一下 getRipplePoint 方法,传入的参数是原点的坐标及需要转换的顶点坐标,在它里面做了下面这些处理:
通过反正切函数获取到顶点和原点间的水平角度:
float angle = (float) Math.atan(Math.abs((staticY - originY) / (staticX - originX)));
通过余弦函数计算顶点的偏移距离:
float length = getLength(staticX - originX, staticY - originY); float rate = (length - rippleRadius) / rippleWidth; float offset = (float) Math.cos(rate) * 10f;
这里的 10f 是最大偏移距离。
计算出来的偏移距离是直线距离,还需要根据顶点和原点的角度,用余弦、正弦函数将它转换成水平、竖直方向的偏移距离:
float offsetX = offset * (float) Math.cos(angle); float offsetY = offset * (float) Math.sin(angle);
根据顶点原来的坐标和偏移量就可以得出偏移后的坐标了,至于是加还是减,还要看顶点所在的位置。
getRipplePoint 的完整代码如下
ce66
:
/**
* 获取水波的偏移坐标
*
* @param originX 原点 x 坐标
* @param originY 原点 y 坐标
* @param staticX 待偏移顶点的原 x 坐标
* @param staticY 待偏移顶点的原 y 坐标
* @return 偏移后坐标
*/
private PointF getRipplePoint(float originX, float originY, float staticX, float staticY) {
float length = getLength(staticX - originX, staticY - originY);
//偏移点与原点间的角度
float angle = (float) Math.atan(Math.abs((staticY - originY) / (staticX - originX)));
//计算偏移距离
float rate = (length - rippleRadius) / rippleWidth;
float offset = (float) Math.cos(rate) * 10f;
float offsetX = offset * (float) Math.cos(angle); float offsetY = offset * (float) Math.sin(angle);
//计算偏移后的坐标
float targetX;
float targetY;
if (length < rippleRadius + rippleWidth && length > rippleRadius) {
//波峰外的偏移坐标
if (staticX > originY) {
targetX = staticX + offsetX;
} else {
targetX = staticX - offsetX;
}
if (staticY > originY) {
targetY = staticY + offsetY;
} else {
targetY = staticY - offsetY;
}
} else {
//波峰内的偏移坐标
if (staticX > originY) {
targetX = staticX - offsetX;
} else {
targetX = staticX + offsetX;
}
if (staticY > originY) {
targetY = staticY - offsetY;
} else {
targetY = staticY + offsetY;
}
}
return new PointF(targetX, targetY);
}
我也不知道这种计算方法是否符合物理规律,反正感觉像那么回事。
执行水波动画
大家都知道事件分发机制,作为一个 ViewGroup,会先执行 dispatchTouchEvent 方法。我在事件分发之前执行水波动画,也保证了事件传递不受影响:@Override public boolean dispatchTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: showRipple(ev.getX(), ev.getY()); break; } return super.dispatchTouchEvent(ev); }
showRipple 的任务就是循环执行 warp 方法,并且不断改变水波半径,达到向外扩散的效果:
/** * 显示水波动画 * * @param originX 原点 x 坐标 * @param originY 原点 y 坐标 */ public void showRipple(final float originX, final float originY) { if (isRippling) { return; } initData(); if (bitmap == null) { return; } isRippling = true; //循环次数,通过控件对角线距离计算,确保水波纹完全消失 int viewLength = (int) getLength(bitmap.getWidth(), bitmap.getHeight()); final int count = (int) ((viewLength + rippleWidth) / rippleSpeed); Observable.interval(0, 10, TimeUnit.MILLISECONDS) .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .take(count + 1) .subscribe(new Consumer<Long>() { @Override public void accept(@NonNull Long aLong) throws Exception { rippleRadius = aLong * rippleSpeed; warp(originX, originY); if (aLong == count) { isRippling = false; } } }); }
这里用了 RxJava 2 实现循环,循环的次数是根据控件的对角线计算的,保证水波会完全消失。水波消失后再点击才会执行下一次的水波动画。
注意!要点题了。
讲了这么多还没用到 drawBitmapMesh 方法。ViewGroup 绘制子控件的方法是 dispatchDraw,warp 方法最后调用的 invalidate() 也会触发 dispatchDraw 的执行,所以可以在这里做手脚:
@Override protected void dispatchDraw(Canvas canvas) { if (isRippling && bitmap != null) { canvas.drawBitmapMesh(bitmap, MESH_WIDTH, MESH_HEIGHT, targetVerts, 0, null, 0, null); } else { super.dispatchDraw(canvas); } }
如果是自定义 View 的话,要修改 onDraw 方法。
到这就完成啦。妥妥的。
对了,不建议用这个控件包裹可滑动或者有动画的控件,因为在绘制水波的时候,子控件的变化都是看不到的。
源码地址
相关文章推荐
- 使用 drawBitmapMesh 实现仿真水波纹效果
- Android图像处理(五)镜像、倒影、drawBitmapMesh实现旗帜飘扬效果
- drawBitmapMesh实现的CurtainDialog效果,一个比较屌的下落动画效果
- 使用drawBitmapMesh扭曲图片
- Android canvas.drawBitmap实现透明效果
- 使用canvas.drawBitmapMesh扭曲图像
- 使用CSS实现按钮点击波纹效果
- 在GPU上使用线程实现波纹效果
- android drawBitmapMesh()图片旗帜飘扬效果
- Android学习之使用贝塞尔曲线实现波纹效果
- Android:使用drawBitmapMesh方法产生水波(一)
- 使用 drawBitmapMesh 扭曲图片
- Android Canvas的drawBitmapMesh实现扭曲图像
- 初学Android,图形图像之使用drawBitmapMesh扭曲图像(三十二)
- AS3 使用Bitmap+Matrix实现的:径向+转旋+叠加图层效果的模糊效果
- 使用CSS实现按钮点击波纹效果
- 使用ASP.NET AJAX实现(图片)幻灯片效果
- 使用XMLHTTP 获取服务器数据,实现无刷新效果
- 使用AjaxPro实现ajax效果
- 使用AjaxPro实现ajax效果