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

Posted 2020-08-27 emotion_abc

1引言

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

2显示

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

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

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

这里附上我实现的效果图

 

 

 

 

2.1动感歌词API

 

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

部分代码：

 

 

2.2动感歌词显示原理

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

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

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

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

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

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

部分代码如下：

获取【字】内的播放进度

 

获取已播放的长度

 

 

2.3歌词平缓移动

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

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

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

部分代码如下：

 

 

 

 

2.4歌词快进

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

2.5歌词换行

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

部分代码如下：

 

 

 

 

2.6歌词字体缩放

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

部分代码如下：

 

 

3参考

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

卡拉OK歌词实现方式

4源码

乐乐音乐-android版本

5最后

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

最后，没有最后了。