前言
大家会发现使用iPhone拍照时候有一个使用频率不是特别高的一个功能——系统自带滤镜,平时拍照拍了就到美图软件美美,最近实习单位(多媒体技术公司)有个需求就是做一个这样的效果,为了全平台通吃采用OpenGL ES开发。
看标题可能还不知道我所描述的九宫格是什么,下面大家可以看一下这张截图:
对于性能的要求,达到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坐标,判断落在的区域,触发相对应视口的变化函数。