2019独角兽企业重金招聘Python工程师标准>>> 
背景：之前偶然看到优酷有类似的页面切换动画效果。于是自己也打算来实现下这样的效果。
动效说明：点击界面中的任意位置，界面以点击位置作为中心点，开始以漩涡状态，扭曲，收缩。直到消失。
直接上我实现的效果：
一，方法原理说明：
- 将页面生成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阶贝塞尔曲线。