android-magic-surface-view

android-magic-surface-view

这是一个 android 动画特效库， 可以实现各种炫酷动画。

1. 安装

gradle:

dependencies {
    compile 'com.gplibs:magic-surface-view:1.1.1'
}

2. 一些示例效果

此文档只做一些简单说明, 具体使用方法还请参考 示例项目.

示例项目源码:

示例项目apk: Download

以下是示例项目中的一些效果 (gif图片帧数低，使用真机运行效果更好):

启动及退出动画 :

模仿MacWindow动画 :

碎片化曲面动画 :

其他示例效果，可以下载示例项目运行查看。

3. 概述

一个MagicSurfaceView只能同时渲染一个MagicScene

一个MagicScene可以包含多个MagicSurface

一个MagicSurface可以对应一个View或者Bitmap对象

场景创建及渲染

…

模型更新器 MagicSurfaceModelUpdater 动画原理

MagicSurfaceModelUpdater 原理相对麻烦些，单独说明如下：

渲染使用openGL；每个MagicSurface对象都包含一个SurfaceModel，这个SurfaceModel即是openGl要绘制的曲面模型;

SurfaceModel中包含着openGL绘制时需要的一些必要元素, 顶点坐标集合、顶点索引集合、法向量集合等;

构造MagicSurface时传入View后，会转为Bitmap 作为纹理绑定到曲面模型上。

曲面模型的生成，及纹理绑定过程都由此库自动完成。

我们可以做的是：

SurfaceModel中的顶点集合，是一个 r(行) * c(列) 的一个矩形网格；

我们修改这个矩形网格上每个点的属性，渲染效果就会有相应的变化；(网格的点与点之间每像素点的属性，由openGL根据我们设置的网格关键点的属性进行插值计算自动完成)

网格上每个点可以修改的属性包含:

1. 顶点坐标。修改网格上某一点的顶点坐标后，绑定在该点上的纹理也会跟着发生相应的形变。

2. 顶点颜色。修改网格上某一点的顶点颜色后，该点上的最终颜色会按 "顶点最终颜色计算过程" 那样进行变化。

顶点最终颜色计算过程 为:

顶点最终颜色 = 原始颜色 * 顶点颜色 * 场景环境光颜色 + 原始颜色 * 顶点颜色 * 灯光颜色

原始颜色：构建MagicSurface时传入的View或者Bitmap生成的纹理在对应坐标的颜色值.

顶点颜色：默认为rgba(1,1,1,1); 可以由 模型更新器 修改.

场景环境光颜色：默认为rgba(1,1,1,1); 可以由 MagicSceneUpdater 修改.

灯光颜色：构建MagicScene时传入的灯光对象集合，在模型对应顶点产生的光照颜色值; 如果未设置灯光，灯光颜色值为rgba(0,0,0,0); 可以由 MagicSceneUpdater 修改.

颜色相乘算法为：(其中r,g,b,a都为0 ~ 1的浮点数, 对应整形颜色值0 ~ 255)

color1(r1, g1, b1, a1) * color2(r2, g2, b2, a2) == color3(r1* r2, g1* g2, b1* b2, a1* a2)

颜色相加算法为：(其中r,g,b,a都为0 ~ 1的浮点数, 对应整形颜色值0 ~ 255)

color1(r1, g1, b1, a1) + color2(r2, g2, b2, a2) == color3(r1+r2, g1+g2, b1+b2, a1+a2)

场景坐标(即openGL坐标):

跟坐标相关的动画操作都使用场景坐标，与Android的View的坐标系无关

MagicSurfaceView的中心即为场景坐标原点(0,0,0) x轴向右 y轴向上 z轴向屏幕外

MagicSurface网格模型各点坐标z轴默认为0

MagicSurfaceView 及 MagicSurface 相关点场景坐标获取方法 参考 "5. 模型更新器 MagicSurfaceModelUpdater"

关于偏移量:

当一个MagicSurface上同时使用模型更新器和矩阵更新器时.

两个只能有一个应用偏移量，不然位置会出现偏差。 偏移量具体说明，参考 模型更新器 和 矩阵更新器。

Updater性能优化:

MagicSceneUpdater, MagicSurfaceModelUpdater及MagicSurfaceMatrixUpdater 都为 MagicUpdater 的子类

当同时有多个MagicUpdater运行时，可以考虑进行分组

MagicUpdater都有一个可以传入分组参数的构造函数和一个setGroup方法可以对他们进行分组; (setGroup必须要在调用render方法之前执行)

如果不进行分组，它们会独自开启一线程更新。将一些计算量较少的MagicUpdater分到同一组，他们将在一个线程中执行，这样可以节约资源，提升性能。

4. 场景更新器 MagicSceneUpdater

MagicSceneUpdater 对场景变量进行修改; 场景变量包含 环境光和光源。

调用过程为 willStart -> didStart -> (update [此部分通过notifyChanged触发，循环调用直到 调用Updater stop方法]) -> didStop

…

5. 模型更新器 MagicSurfaceModelUpdater

MagicSurfaceModelUpdater 对MagicSurface网格模型各顶点坐标及颜色值进行修改，

调用过程为 willStart -> didStart -> (updateBegin -> (updatePosition [遍历网格每个点]) -> updateEnd [此部分通过notifyChanged触发，循环调用直到 调用 Updater stop方法]) -> didStop

…

MagicSurfaceModelUpdater相关方法说明

在Updater生命周期内 以下这些方法都是可以有效调用的。

…

6. 矩阵更新器 MagicSurfaceMatrixUpdater

MagicSurfaceMatrixUpdater 对MagicSurface网格模型进行各种矩阵变换(缩放，旋转，平移).

调用过程为 willStart -> didStart -> (updateMatrix [此部分通过notifyChanged触发，循环调用直到 调用 Updater stop方法]) -> didStop

…

7. MagicMultiSurfaceUpdater

MagicMultiSurfaceUpdater 对 MagicMultiSurface 中每个子模型进行矩阵变换及颜色值修改，

调用过程为 willStart -> didStart -> (updateBegin -> (update [遍历每个子模型]) -> updateEnd [此部分通过notifyChanged触发，循环调用直到 调用 Updater stop方法]) -> didStop

…