淺談動感歌詞-歌詞顯示篇

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最後

但願歌詞分析篇、生成篇、解析篇和顯示篇對一些想了解動感歌詞的讀者有幫助。若有侵權，麻煩告知。