当前位置: 代码迷 >> Android >> Android 同步歌词滚动 唱片手势滑动 原理手写
  详细解决方案

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

热度:5   发布时间:2016-05-01 18:54:52.0
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方法中。

?

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

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

1 楼 AndroidMarketTest1 2011-11-03  
写得相当不错哈,有demo可以借来参考下吗??
2 楼 cookiejj2010 2011-11-05  
AndroidMarketTest1 写道
写得相当不错哈,有demo可以借来参考下吗??

代码散得七零八落了。。。 找了下还是拼不大起来 其实现在实际用的时候感觉效果还是有点不尽如人意 主要是做法比较僵硬
3 楼 宝玉来了 2011-11-22  
给发个demo吧,QQ:838855199
  相关解决方案