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

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)

卡拉OK歌詞實現(xiàn)方式

4源碼

樂樂音樂-android版本

5最后

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,936評論 25 709
  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,184評論 4 61
  • 你是我的及時雨,適時的出現(xiàn)澆滅了我的憤怒。 你是我的救命稻草,牢牢抓住就不墜落萬丈深淵。 我是你的擺渡人,陪伴你踏...
    大才閱讀 1,013評論 0 0
  • 感恩我的太陽,早上照亮我的房間,讓我一醒來就看到了光明! 感恩我這幾天定的產品,快速的到我手上。給我的客戶帶去美麗...
    莎女神閱讀 205評論 0 1

友情鏈接更多精彩內容