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如下图所示: