Android Mesh吸入式动画详解

Android Mesh吸入式动画详解

代码下载地址：http://download.csdn.net/detail/u012910985/7068537

1 背景

吸入(Inhale)效果，最初是在iOS的Note程序中看到的，用户在做删除时，它的删除效果是：这一页内容吸入到一个垃圾框的图标里面，请看下图所示：

此效果比单纯的缩放更炫，下面介绍如何在Android上面实现一个类似的效果，先看看效果图。

上图演示了动画的某几帧，其中从1 - 4，演示了图片从原始图形吸入到一个点（红色标识）的效果。
实现这样的效果，我们利用了Canvas.drawBitmapMesh()方法，这里涉及到了一个Mesh（网格）的概念。

2 Mesh的概念

Mesh表示网格，说得通俗一点，可以将画板想像成一张格子布，在这张布上绘制图片。对于一个网格端点均匀分布的网格来说，横向有MeshWidth + 1个顶点，纵向有MeshHeight + 1个端点。顶点数据Vertices是以行优先的数组（二维数组以一维数组表示，先行后列）。网格可以不均匀分布。请看下图所示：

上图显示了把图片分成很多格子，其分布是均匀的，它的顶点数是：(MeshWidth + 1) * (MeshHeight + 1)个，那么放这些顶点的一维数据的大小应该是：(MeshWidth + 1) * (MeshHeight + 1) * 2 (一个点包含x, y坐标)
float[] vertices = new float[(meshWidth + 1) * (meshHeight + 1) * 2];
试想，我们让这个格子(mesh)不均匀分布，那么绘制出来的图片就会变形，请看下图所示：

3 如何构建Mesh

吸入动画的核心是吸入到一个点，那么我们就是要在不同的时刻构造出不同的mesh的顶点坐标，我们是怎么做的呢？

3.1 创建两条路径(Path)

我们创建一个从上到下的吸入式效果，构造的两条Path如下图所示：