Android 同步歌词滚动 唱片手势滑动 原理手记

刚才误删了一次。。。还好有个打开的页面没关掉

先上效果图

 

中间就是同步滚动歌词的部分了 现在是最简单的效果 当前播放字体是红色 其余部分为白色

右侧是一个类似Gallery效果的 可以上下拖动 选择唱片 拟3D 效果目前感觉还行

 

记录下2部分的实现原理

————————————

 

首先是歌词同步，这个很大部分都是参考了YOYOPlayer这个开源的播放器 

http://www.blogjava.net/hadeslee/archive/2008/01/11/173489.html 作者的开发手机 非常详细的关于歌词滚动的代码实现 Android上的实现基本也是一样

 

主要包括3个类 Sentence Lyric 以及LyricView

Sentence是指单个歌词对象 其中包括了歌词的开始时间，结束时间，以及歌词内容，方法包含检索当前时间是否属于该歌词，歌词的着色属性等 其中有一个非常重要的方法 用于获得偏移量

偏移量是什么呢 就是一句歌词在每次刷新的时候移动的距离 计算该距离的公式是：

（字体高度+空隙）*（（当前时间-开始时间）*1.0 /（结束时间-开始时间））

即距离除以歌词播放持续的时间占的比例（乘1.0是保持浮点型）

 

Lyric类保有Sentence对象的集合 也就是一首歌的完整歌词 拥有一个List<Sentence> 里面根据播放时间顺序将每句歌词都排列好了（边解析LRC文件边排序） 也就是之后要做的简单来说就是依次取出歌词对象 显示 Lyric同时定义了如何绘制自己  也就是drawLyc方法 

画歌词的思路是 在中心位置画当前歌词（根据当前播放时间获得） 之后一次在上方画前面的部分 下方画后面的部分 当tmpY<0 表示画不下了 则停止不画 需要注意的是 这里所说的中心位置 是指屏幕中心+偏移量 得到的当前歌词绘制位置

 

LyricView就是要在布局文件中使用的控件了 这个类非常简单 只是继承View 在onDraw中将画笔和画布传给Lyric，调用其drawLyc方法来绘制自己

在代码中使用LyricView 需要为其设定Lyric 也就是画的歌词集合 以及 当前音乐播放的时间

 

————————————

 

接下来是右侧的滑动唱片

现在实现的方式将坐标都写死了 扩展移植性很差 应该需要再抽离出一层接口会更好 这里只是记录下思路

在当前画面上显示的是9张图片 比如叫做ABCDEFGHI 这里先绘制最后的两张图片A I 设置最高的透明度 尺寸 然后绘制B H。。依次类推 这样就有了一个拟3D效果

那么如何让他滚起来呢 我们将视线放到单独的张图片上 比如这里的中心图片E E到F的过程是一个线性移动的过程 也就是说只是简单的x+ y+ width,height- alpha-的过程 同样这样的模式可以应用到每一个图片上 比如这里我们设定中间过程有4帧 当第4帧时 E就到了F的位置 而D到了E的位置 此时就恢复到了初始的状态 只是每个位置上的图片变了下 变成了ZABCDEFGH 知道了这样的过程 就可以进行进一步操作了

 

根据刚才总结到的 定义了一个类似结构体的东西 其中分别是posX posY横纵坐标点alpha透明度以及width height值 比如叫做PosAlphaSize类

 

之后定义的是我们的自定义View控件 当然他自身会保有一个需要在界面上显示的图片List（只是显示的9张） 然后onDraw方法中 根据PosAlphaSize中的参数 将9张图片分别绘制在相应的位置 （先画2侧 再绘制中心图片）

 

在主界面中，有一个所有封面图片的集合 需要显示的图片就在是这个图片集合中的一个子序列 有一个当前帧的计数器（0-4） 还有一个当前显示图片序列的下标index 以确定哪些图片被显示 然后将这个图片子序列传入到自定义的View中 让其自身invalidate绘制 每一帧的具体位置都被定义了 即每帧每张图片的坐标（一个类似2维的数组，只需根据这个坐标进行绘制就好了） 当然这也是做得不好的地方 正是因为坐标写死了 导致移植性很差 不过目前先实现效果

 

最后  给这个View添加上手势动作 onTouch Gesture等等 绘制下一帧的代码主要写在onScroll和onFling方法中。

 

——————————————

总结的比较乱 只是介绍下实现的原理 代码写得很是乱 还需要再进行优化

评论

3 楼 宝玉来了 2011-11-22  

给发个demo吧，QQ：838855199

2 楼 cookiejj2010 2011-11-05  

AndroidMarketTest1 写道

写得相当不错哈，有demo可以借来参考下吗？？

代码散得七零八落了。。。 找了下还是拼不大起来 其实现在实际用的时候感觉效果还是有点不尽如人意 主要是做法比较僵硬

1 楼 AndroidMarketTest1 2011-11-03  

写得相当不错哈，有demo可以借来参考下吗？？