简介

倒影可以为 UI 界面带来立体感，是一个常用的 UI 特效。下图是一个图片浏览 程序的 GridView⁵，该 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;

}

参考资料

1. AS3 倒影算法
2. J2ME实现水波倒影效果(附源码)
3. 数字图像处理的基本原理和常用方法
4. 教你在谷歌Android平台中处理图片
5. Android Slide Show Project