兔子视频 OpenGL 客户端技术解析



兔子视频

一款面向智能机顶盒和智能电视的在线视频聚合导航应用。整个应用的界面使用OpenGL实现，并使用主动渲染方式让界面不断的循环绘制，OpenGL帧率较高，所以里面的动画看起来非常流畅。

整个页面简洁大气，操作不繁多，交互简洁而信息量并未减少，这也是使用OpenGL来实现的一个原因吧。

1、欢迎页

 

 

其使用的图片资源：

 

这个页面不能确定是使用什么实现的，因为Android 2Dview可以实现，SurfaceView也可以实现，此处猜测是使用OpenGL实现，但欢迎页和主界面并非同一个GLSurfaceView，是同一个activity切换了两个GLSurfaceView来实现。

好处是：欢迎页会随着版本节奏不断的变化，这样分开来写，逻辑上比较好控制，技术后期便于维护。

坏处是：当跳转到主页面时，会导致中间过程黑屏一段时间，但是会比跳转两个activity要快一些，可以用下面说到的方案解决这个黑屏问题。

新方案：可使用同一个GLSurfaceView，加载后台数据时绘制欢迎页同时加载主页面的纹理图像到显存，加载完毕后绘制主页面。

新方案的好处是：欢迎页跳转主页面不黑屏，跳转更加协调、连贯、流畅，无滞后停顿等不良用户体验。

新方案的坏处是：需要在其中增加变量来控制，其绘制和按键逻辑都需要分别处理。

2、推荐页面

 

 

页面中的菜单图标按钮动画实现原理

资源图和图对应的配置文件：

   

原理分析：

整个动画使用帧动画实现，即切换不同图片来实现整个动画，而将所有帧用到的图片全部置于同一张图当中，只是在绘制时根据其配置文件获取其坐标，然后绘制。

好处：极大化的减少了资源的空间占用，同时减少了io次数，OpenGL绘制时只需要一个纹理id，使用Canvas方式绘制时也只需要一个bitmap引用即可。

坏处：需要美工提供这样的资源图和配置文件，而目前这个还是手动的，技术依然需要根据资源图和配置文件写对应于此配置文件的程序和动画播放器，通用性不高。

解决方案：可升级配置文件和读取配置文件的程序让其自动化，程序只需要知道配置文件名字，即可实现整个动画。如果能提供一个图像工具让美工高效率的输出这样的资源更好，不过一个视频播放应用里面用不到多少这样的图，去写这么一个自动化工具有点代价过大，可视情况而定。

 

 

还可以利用这个技巧去优化一些里面的图片资源比如：

 

 

 

这样两组图片也可以组合到同一张图里面，只是在绘制时根据坐标进行绘制

3、分类页面：

 

 

 

此页面特别显眼的效果就是，焦点定位到某一个view时，此view中的人物图像平滑上移。

技术分析：

使用OpenGL中可编程着色器特点，做一个纹理坐标移动动画，在加整个view的放大动画和一个位置移动动画即可实现。

 

基于Android原生2D view实现原理：

重写View的onDraw方法，在绘制时，根据当前动画状态计算其绘制的区域，将需要绘制的部分从整个大图中抠出来绘制上去。

坏处是：需要用一个Thread来控制绘制动画，或者让主线程不断刷界面来做这个动画，需要增加更多相关的控制逻辑。

4、排行榜页面

 

 

焦点提醒使用列出前三并对其做一个逐个显示/消失的动画和放大/缩小整个View的方式非常醒目的让用户感觉到焦点，有一种非常爽快的质感。

使用OpenGL的话不难实现，只需要根据这个效果写逻辑就Ok，Android原生View也可以实现，但是应该达不到这样的流畅度，动画可能会卡顿。

5、设置页面

 

 

此页面没有什么技巧方面的东西，每个图标都是一个整图，比如用到的其中的部分资源如下所示：

   

 

6、关于页面

 

这个页面完全就是一张整图放在上面的。

7、电影列表页面

 

这个页面的特点也是焦点动画，就是一个View向上做动画，另外的View向下做动画，没什么难点。

8、注册登录页面海报墙的滚动原理

 

   

此页面依然使用OpenGL绘制，这里有一个点，即海报墙的滚动，其原理如下：

如果使用canvas方式绘制，则需要绘制两个矩形，而且要对坐标进行计算，而使用OpenGL做这样一个效果就要简单很多，直接做一个纹理y坐标的0--1的循环动画计算，然后在着色器中使用一句话进行一下坐标转换即可，只需要绘制一个矩形。

 

9、页面跳转

 

推荐

  

  全部电影

 

排行榜和播放设置弹框

主页面中个页面跳转

首先是page之间的跳转，它依然模仿了Android原生的viewpage跳转方式，其跳转动画效果也类似，用OpenGL实现这个效果也不难，在整个pageView上加一个对应的动画的方式实现即可。

切换其它页面：

    1、反编译apk看manifest配置文件中只有四个activity

com.luxtone.tuzi3.activity.Main

com.luxtone.tuzi3.activity.UpdateTaskActivity

com.luxtone.tuzi.live.activity.TuziLiveActivity

com.luxtone.tvplayer.activity.TvPlayerActivity

2、页面之间跳转太快，完全没有停顿。

3、查看其内存，跳转到某个页面后其内存上涨，回来后内存没有回落，说明跳转过去的内存没有被回收，所以第二次切换这两个页面会非常快。但是也有内存管理机制，不会无限制的上升。

4、切换页面时，做一个放大动画然后立刻切换到另外一个页面，中间基本无任何停顿。切换回来后一个缩小动画，依然无卡顿。

5、直接进入看全部电影页面，然后点击搜索按钮后看其效果即可得出，其页面跳转动画不是相对于activity的而是相对于OpenGL中绘制部分的。

 

基于以上几条可得这样的结论：

 

1、页面跳转不使用Activity或者切换GLSurfaceView的方式。

2、基本所有的页面都使用同一个GLSurfaceView显示，或者说在同一个Renderer里面实现，只是绘制时根据逻辑选择绘制内容。

3、按键处理跟随显示逻辑。