java动效_Android 界面漩涡扭曲动效实现

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

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

直接上我实现的效果：

一，方法原理说明：

将页面生成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阶贝塞尔曲线。