使用 2D 方法实现倒影特效

倒影特效可以为 UI 带来绚丽的视觉效果，本文以一个图片浏览器的 GridView 的例，介绍了一种以 2D 方法实现倒影特效的方法，给出了算法的代码片段。

简介

倒影可以为 UI 界面带来立体感，是一个常用的 UI 特效。下图是一个图片浏览程序的 GridView5，该 View 的倒影特效为 UI 界面增色不少。

带倒影特效的 gridview

实现原理

实现倒影可以使用 OpenGL 等 3D 接口方法，也可以用 2D 的方法模拟。

用 2D 方法实现倒影需要从两个方面考虑：

1. 倒影是上、下翻转的图像；
2. 从上到下透明度越来越大。

图像翻转的实现

原理上讲，图像的翻转实际就是将图像数据上下行互换。

Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);for (int y = 0; y < h; y++){ bm.setPixels(srcPix, y * w, w, 0, h - y - 1, w, 1);} 透明度渐变

实现透明度渐变有两种方法，一是使用蒙板；二是直接修改像素数据，修改每个像素的 alpha 值。

对于蒙板法，事先做好一张透明度渐变的图，这就是我们的蒙板，在绘制完图像之后把蒙板图片绘制上去，这样就产生了透明度渐变的效果。

对于第二种方法，我们需要首先读出图片的数据，然后修改每个像素的 alpha 值。下面的代码片段的功能是逐行增加 alpha 值，产生的效果是自上向下由暗变亮。

int alpha = 0x00000000;mBitmap.getPixels (pix, 0, w, 0, 0, w, h);for (int y = 0; y<h; y++) { for (int x=0; x<w; x++) { int index = y * w + x; int r = (pix[index] >> 16) & 0xff; int g = (pix[index] >> 8) & 0xff; int b = pix[index] & 0xff; pix[index] = alpha | (r<<16) | (g<<8) | b; } alpha = alpha + 0x01000000;}