Android 界面漩涡扭曲动效实现

背景：之前偶然看到优酷有类似的页面切换动画效果。于是自己也打算来实现下这样的效果。

动效说明：点击界面中的任意位置，界面以点击位置作为中心点，开始以漩涡状态，扭曲，收缩。直到消失。

直接上我实现的效果：

Android 界面漩涡扭曲动效实现-LMLPHP

一，方法原理说明：

将页面生成bitmap。
使用自定义View来绘制扭曲的图像。图像绘制的时候使用的关键的api 是： canvas.drawBitmapMesh();

二，实现细节说明：

1. 生成页面Bitmap: 优先使用drawingCache ，如果没有再创建bitmap 对象。

public static Bitmap createBitmapFromView(View view) {
        if (view instanceof ImageView) {
            Drawable drawable = ((ImageView) view).getDrawable();
            if (drawable != null && drawable instanceof BitmapDrawable) {
                return ((BitmapDrawable) drawable).getBitmap();
            }
        }
        view.clearFocus();
        Bitmap bitmap = view.getDrawingCache();
        if(bitmap != null) {
            return bitmap;
        }

        bitmap = createBitmapSafely(view.getWidth(),
                view.getHeight(), Bitmap.Config.ARGB_8888, 1);
        if (bitmap != null) {
            synchronized (sCanvas) {
                Canvas canvas = sCanvas;
                canvas.setBitmap(bitmap);
                view.draw(canvas);
                canvas.setBitmap(null);
            }
        }
        return bitmap;
    }

    public static Bitmap createBitmapSafely(int width, int height, Bitmap.Config config, int retryCount) {
        ...
    }

2. 关于自定义控件 VortexView 。主要是再onDraw(Canvas ) 方法中使用rootView 生成的Bitmap 通过canvas.drawBitmapMesh 方法来绘制扭曲的图像。（最开始我的方案是支持在native 中，对图片进行像素级别的修改。虽然成功了，但是效率却很慢。）

关于API drawBitmapMesh 可以参考一下这篇博文：使用drawBitmapMesh方法产生水波

期原理猜测应该是使用了opengl 中纹理，坐标变换映射的技术。（只是猜测）

drawBitmapMesh使用方法：将原始图片分割成为M行，N列。并计算得出原始的每个交点再二维空间内的坐标。坐上角为（0，0）点。水平向右为X正方向。垂直向下为Y正方向。使用漩涡算法，计算每一帧下，原始顶点（线的交点）在当前时刻下的坐标位置。即生成的局部变量ve［］；这样界面就能显示出图像被扭曲的动画。

当然：分割的行列越多，效果就会越好。

public class VortextView extends View {
...

 @Override
    public void onDraw(Canvas canvas) {
        if (destBitmap != null) {
            int mswd = mesh.getMeshWidth();
            int msht = mesh.getMeshHeight();
            float[] ve = mesh.getVertices();

            if (rect != null) {
                int count = canvas.save();
                canvas.translate(rect.left, rect.top);
                canvas.drawBitmapMesh(destBitmap, mswd, msht, ve, 0, null, 0, null);
                canvas.restoreToCount(count);
            } else {
                canvas.drawBitmapMesh(destBitmap, mswd, msht, ve, 0, null, 0, null);
            }

//            mesh.drawLines(canvas,paint);

        }
    }
...
}

3. 关于算法：不管是漩涡扭曲动效，还是仿造mac os 最小化效果。原理都是一致的。唯一不同的地方在于算法。我们需要分别设计算法来拟合出在目标时刻下新的顶点位置。

漩涡动效算法：这里需要用到极坐标公式。夹角随着时间增大而增大。半径随着时间增大而见小。然后在求出对应的x和y；
mac os 最小化：这里我使用了2阶贝塞尔曲线。

Carlyle_Lee

Android 界面漩涡扭曲动效实现