前幾天有朋友問到歌詞滾動應該怎麼做，針對歌詞滾動這個功能做了一個簡單的案例，僅供參考，大家如果有更好的做法記得call我們一下！
按照慣例，我們先看一下這個效果是怎樣的
點這裏預覽：https://o0piel.axshare.com
看到效果了，咱們一起來看看在怎麼做。頁面的搭建這裏就不細說了，相信大家都是沒有問題的。只跟大家說要注意的地方。
第一、最重要的歌詞部分。這裏的做法是將歌詞轉化成了動態面板，這個那麼長的歌詞可以在動態面板的範圍內進行滾動。
第二、播放和暫停按鈕，這裏的做法是用動態面板的不同狀態去做，切換面板狀態即可。當然你可以不這麼做，沒有絕對。
再來看一下，歌詞在滾動的時候應該如何滾動。實際上我們是讓歌詞在動態面板中從下往上移動，關鍵是需要怎麼移動。我們先看一下起始位置和結束位置。
起始位置就是我們剛開始放置的位置，在這裏是y=100。結束位置這裏用的是y=-1200，也就是說歌詞是從100移動到了-1200，移動的距離是1300。這首歌的時間是5:25，所以是在325秒的時間裏需要移動1300，可以得出每1秒鐘，歌詞需移動4個像素。
我們可以藉助另一個動態面板，讓面板進行狀態切換，每切換一次就讓歌詞向上移動一點，比如可以1秒切換一次，每次切換歌詞移動4個像素。所以在頁面中我們要增加一個輔助用的動態面板，創建2個或2個以上的狀態。
在開始按鈕上進行設置，一要設置按鈕變成暫停。前面說了這裏用的是動態面板去做的，所以這裏是設置面板狀態切換到相應狀態。另外，要設置輔助用的動態面板進行不斷進行狀態切換，只需循環到next狀態即可。
這裏的配置是1秒鐘切換一次。回到輔助的這個動態面板，在面板狀態改變的時候，歌詞移動就可。前面我們分析的，每一秒鐘歌詞移動4個像素，也就是在y軸上移動相對距離4，x軸不用移動。這裏可以添加邊界，就是起始位置和結束位置。
注意這裏是從下往上移動，所以y軸的移動位置是-4。如果你做出來不對，不妨檢查一下這個數值。記住，正值是向下移動，負值是向上移動。
要讓歌詞停止滾動，很簡單，只需要讓輔助的動態面板停止循環即可。停止之後就不再改變狀態了，所以輔助用的動態面板上設置的改變面板時的動作不再執行。
這個案例比較簡單，但是非常實用，還可以用在諸如進度條等案例中。只要掌握了這個原理，一切就會迎刃而解。
（加微信：pexuepexue，小編邀請您進入全國產品經理交流羣）
羣內每日分享學習資料、重磅報告、面試問題、招聘信息、免費課程
