继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

浅谈动感歌词-歌词显示篇

浮云间
关注TA
已关注
手记 146
粉丝 16
获赞 47

1引言

经过分析篇、生成篇和解析篇之后,相信大家对动感歌词都已经不再陌生了,现在最重要的就是,动感歌词怎样显示的问题,这里就不再介绍java swing上面怎样显示了,因为在生成篇,已经做了一些简单的介绍,这一篇着重说一下动感歌词在android上面怎样显示。

2显示

关于歌词的平滑滚动,之前一直都是用android Scroller来滚动,发现在歌词滑动快进方面,一直都实现不了,能力有限。幸好,发现了一个帖子,这个帖子真是帮了大忙,这里先贴一下,他的博客,我强烈推荐大家看一下他的博客,他说得比较详细清楚,我这里就简单说一下:

自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现

(http://www.jianshu.com/p/576cbf43053e)

在这里,我参考了他的博客和代码,对自己的乐乐音乐播放器进行了重组,在它的基础上实现歌词的平滑动和快速滑动。

这里附上我实现的效果图


5ba645c50001599607201280.jpg


5ba645cb0001599607201280.jpg

2.1动感歌词API

5ba645cd000192f907180319.jpg

由图可知,Graphics2D在绘画文本时,先画默认颜色的歌词文本,再设置clip层的长度宽度,然后再绘画【高亮】歌词文本,只要我们不断地修改clip层的宽度,就是我们想要的动感歌词效果了。

部分代码:


5ba645cd0001eb8c09210581.jpg

2.2动感歌词显示原理

1.通过当前的播放时间获取当前歌词所在的行索引(lIndex)

2.通过行索引(lIndex)获取当前行的歌词LyricsLineInfo

3.通过当前的行索引(lIndex)和当前的时间,获取当前行播放的【字】索引、该【字】对应的持续时间T

4.通过paint获取歌词【字】的宽度S,计算出平均速度:V = S/T

5.根据当前时间获取在该【字】的持续时间内已播放的时间:T1

6.计算clip层的长度L = V * T1

部分代码如下:

获取【字】内的播放进度

5ba645ce0001137707640513.jpg

获取已播放的长度


5ba645ce00013bf906810600.jpg

2.3歌词平缓移动

1.自定义View和使用ValueAnimator动画实现每行歌词的平滑动效果

2.移动距离offsetY= 新行号 * (字体高度 + 空行高度) - 旧行号 * (字体高度 + 空行高度),个人感觉这个比较重要,因为这句,将移动的位移和歌词的行号关联了起来,为后面快速滑动歌词并判断滑动后歌词的位置,提供了条件。

3.为了让歌词歌词居中显示,所以在绘画歌词时,居中的歌词要减去offsetY的大小。

部分代码如下:


5ba645ce0001191709260692.jpg


5ba645cf0001f5a508930734.jpg

2.4歌词快进

重写onTouchEvent事件,VelocityTracker类和ValueAnimator组合使用,来计算手势的速度,然后根据手势速度计算歌词滚动的位置。

2.5歌词换行

这里,我实现的方式比较简陋,就是将从歌词文件解析出来的歌词集合,根据当前的视图大小和字体大小,进行重组,得到一个新的歌词集合,这样保证了可以在不改变歌词实现思路的情况下,实现歌词的换行,不过这方法对歌词的要求比较高,就是歌词文件要精确到【字】,这样子一行歌词因为字体大小分隔成两行歌词时,因为每个【字】都有持续的时间,这样可以轻松地生成一行新的歌词。

部分代码如下:


5ba645cf00016f9807370503.jpg


5ba645cf0001ea8f06920516.jpg

2.6歌词字体缩放

只要就是将当前的滚动位置offsetY设置为当前行,然后修改字体的大小,再重新绘画一下view,即可。

部分代码如下:


1240

3参考

自定义View强势来袭,用自定义View实现歌词显示控件下篇之自定义LyricView的实现

(http://www.jianshu.com/p/576cbf43053e)

卡拉OK歌词实现方式

(http://www.duobei.com/room/trial/5873886122)

4源码

乐乐音乐-android版本

(https://github.com/zhangliangming/HappyPlayer-AS.git)

5最后

希望歌词分析篇、生成篇、解析篇和显示篇对一些想了解动感歌词的读者有帮助。如有侵权,麻烦告知。

原文链接:http://www.apkbus.com/blog-278062-62983.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP