1引言
經過分析篇、生成篇和解析篇之后,相信大家對動感歌詞都已經不再陌生了,現(xiàn)在最重要的就是,動感歌詞怎樣顯示的問題,這里就不再介紹java swing上面怎樣顯示了,因為在生成篇,已經做了一些簡單的介紹,這一篇著重說一下動感歌詞在android上面怎樣顯示。
2顯示
關于歌詞的平滑滾動,之前一直都是用android Scroller來滾動,發(fā)現(xiàn)在歌詞滑動快進方面,一直都實現(xiàn)不了,能力有限。幸好,發(fā)現(xiàn)了一個帖子,這個帖子真是幫了大忙,這里先貼一下,他的博客,我強烈推薦大家看一下他的博客,他說得比較詳細清楚,我這里就簡單說一下:
自定義View強勢來襲,用自定義View實現(xiàn)歌詞顯示控件下篇之自定義LyricView的實現(xiàn)
在這里,我參考了他的博客和代碼,對自己的樂樂音樂播放器進行了重組,在它的基礎上實現(xiàn)歌詞的平滑動和快速滑動。
這里附上我實現(xiàn)的效果圖


2.1動感歌詞API

由圖可知,Graphics2D在繪畫文本時,先畫默認顏色的歌詞文本,再設置clip層的長度寬度,然后再繪畫【高亮】歌詞文本,只要我們不斷地修改clip層的寬度,就是我們想要的動感歌詞效果了。
部分代碼:

2.2動感歌詞顯示原理
1.通過當前的播放時間獲取當前歌詞所在的行索引(lIndex)
2.通過行索引(lIndex)獲取當前行的歌詞LyricsLineInfo
3.通過當前的行索引(lIndex)和當前的時間,獲取當前行播放的【字】索引、該【字】對應的持續(xù)時間T
4.通過paint獲取歌詞【字】的寬度S,計算出平均速度:V = S/T
5.根據(jù)當前時間獲取在該【字】的持續(xù)時間內已播放的時間:T1
6.計算clip層的長度L = V * T1
部分代碼如下:
獲取【字】內的播放進度

獲取已播放的長度

2.3歌詞平緩移動
1.自定義View和使用ValueAnimator動畫實現(xiàn)每行歌詞的平滑動效果
2.移動距離offsetY= 新行號 * (字體高度 + 空行高度) - 舊行號 * (字體高度 + 空行高度),個人感覺這個比較重要,因為這句,將移動的位移和歌詞的行號關聯(lián)了起來,為后面快速滑動歌詞并判斷滑動后歌詞的位置,提供了條件。
3.為了讓歌詞歌詞居中顯示,所以在繪畫歌詞時,居中的歌詞要減去offsetY的大小。
部分代碼如下:


2.4歌詞快進
重寫onTouchEvent事件,VelocityTracker類和ValueAnimator組合使用,來計算手勢的速度,然后根據(jù)手勢速度計算歌詞滾動的位置。
2.5歌詞換行
這里,我實現(xiàn)的方式比較簡陋,就是將從歌詞文件解析出來的歌詞集合,根據(jù)當前的視圖大小和字體大小,進行重組,得到一個新的歌詞集合,這樣保證了可以在不改變歌詞實現(xiàn)思路的情況下,實現(xiàn)歌詞的換行,不過這方法對歌詞的要求比較高,就是歌詞文件要精確到【字】,這樣子一行歌詞因為字體大小分隔成兩行歌詞時,因為每個【字】都有持續(xù)的時間,這樣可以輕松地生成一行新的歌詞。
部分代碼如下:


2.6歌詞字體縮放
只要就是將當前的滾動位置offsetY設置為當前行,然后修改字體的大小,再重新繪畫一下view,即可。
部分代碼如下:

3參考
自定義View強勢來襲,用自定義View實現(xiàn)歌詞顯示控件下篇之自定義LyricView的實現(xiàn)
4源碼
5最后
希望歌詞分析篇、生成篇、解析篇和顯示篇對一些想了解動感歌詞的讀者有幫助。如有侵權,麻煩告知。