实现iOS系统相机九宫格滤镜的思路

前言

大家会发现使用iPhone拍照时候有一个使用频率不是特别高的一个功能——系统自带滤镜，平时拍照拍了就到美图软件美美，最近实习单位（多媒体技术公司）有个需求就是做一个这样的效果，为了全平台通吃采用OpenGL ES开发。

看标题可能还不知道我所描述的九宫格是什么，下面大家可以看一下这张截图：

iOS相机app自带九宫格滤镜

对于性能的要求，达到iPhone切换滤镜的缩放效果，过度动画流畅。

思路

OpenGL ES进行开发，那么每个滤镜是一个矩形，先通过三角图元绘制矩形，通过texture纹理贴图，采集摄像头数据，将每一帧以贴图形式贴到创建的矩形上，但是要如何实现9个滤镜呢？因为后期会加入公司自己的滤镜效果，参考了一些代码，使用viewport（视口），每次刷画面的时候创建九个视口，每个视口的矩形以OpenGL坐标定位（-1，1），（1，1），（-1，-1），（1，-1）。这样每次摄像头数据进来，glview刷新就会实时显示九宫格视频。

切换动画

对于动画，其事就是将变化过程每一帧刷到屏幕，公司工程封装了一个Timg调用这个函数可以实现回调刷新屏幕（应该是与cadisplaylink有关），我设置了一个scale值，每次刷屏幕的时候这个Scale会变化，从0-1或者从1-0，如果是缓进缓出，也就是开始做加速运动中间匀速运动结束减速运动，通过Scale值体现。

切换动画根据视口位置不同而做不同的几个坐标变化，举个例子：中间的视口在向四方拉伸，周围八块在拉伸过程中也要对原点进行变化，变化量为变化所需的总变化量*Scale。

触摸响应

对设备屏幕进行监听，根据整个glview的大小进行判断触摸点在哪个视口，获取触点xy坐标，判断落在的区域，触发相对应视口的变化函数。

效果

九宫格效果