2023年Axure 實現(xiàn)“動次打次”歌詞播放效果

Axure實現(xiàn)“動次打次”歌詞播放效果在很多的音樂播放軟件的歌詞播放頁面中，歌詞可以隨著歌曲動態(tài)播放，呈現(xiàn)出類似下方的效果。

接下來就來共享用Axure如何實現(xiàn)這樣的效果。

一、用到的元件

首先在畫布中拖入一個【文本段落】的元件，命名為【靜態(tài)歌詞】，然后放上需要播放的歌詞。

接著復(fù)制這個文本段落，重新命名為【動態(tài)歌詞】，然后給這個段落設(shè)置一個自己喜愛的顏色。

接著將【動態(tài)歌詞】對齊放在【靜態(tài)歌詞】上方，完全蓋住【靜態(tài)歌詞】，呈現(xiàn)出如下效果。

接著再把【動態(tài)歌詞】的內(nèi)容刪掉，留意這里是刪除內(nèi)容，但元件還留在畫布上，不能把元件給刪掉了，最終的效果就是這樣。

接下來在畫布負空間拖入一個【動態(tài)面板】，命名為【播放掌握器】。

【播放掌握器】內(nèi)需確保至少有兩個狀態(tài)。

最終添加一個【全局變量】，變量名稱為【Location】，默認值為【0】，變量的主要作用是用來實時記錄當(dāng)前歌詞播放到哪個位置。

這樣預(yù)備工作就做完了。

二、播放的交互。

接下來寫交互，實現(xiàn)歌詞播放的效果。

歌詞播放是一個循環(huán)的動作，這里會用到動態(tài)面板的循環(huán)大事，假如有不太懂這個大事的原理或用法的話，可以參考我之前共享過的文章《【Axure教程】讓你的動畫變成“永動機”》。

首先給【播放掌握器】添加【載入時】【設(shè)置面板狀態(tài)】的交互，設(shè)置每隔200毫秒切換到下一個狀態(tài)，這個時間就是歌詞播放的速度。

接下來再給【播放掌握器】添加【狀態(tài)轉(zhuǎn)變時】的交互，這是最核心的一步。

這里直接推斷【動態(tài)歌詞】和【靜態(tài)歌詞】兩個元件的文字長度，假如不相等，表示歌詞沒顯示完，這個時候每循環(huán)一次，就從【靜態(tài)歌詞】中選取一個字添加到【動態(tài)歌詞】中。

從【靜態(tài)歌詞】添加文字到【動態(tài)歌詞】中需要用到表達式，表達式內(nèi)容如下。

substr可以按指定起始位置和長度來選取一段字符串中的文字，concat用來向字符串追加指定文字，這個表達式的意思是：從【動態(tài)歌詞】中選取一個字，添加到【靜態(tài)歌詞】中。

由于我們每次添加完一個字之后，下一次要添加的是之前已添加的字的下一個字，所以這里用到Location的變量來記錄我們之前添加的是第幾個字，默認值為0，表示初次添加的是第1個字，因此，每次添加之后，我們需要給Location加上1，這樣進入下一次循環(huán)的時候，就會自動添加下一個字。

最終假如兩個元件的文字長度全都，表示歌詞已經(jīng)播放完了，這個時候就可以停止動態(tài)面板【播放掌握器】的循環(huán)，并把Location重置為0。

保存設(shè)置后預(yù)覽就可以看到我們所需要的效果。

假如你需要掌握歌詞的暫停與播放，只要通過掌握【播放掌握器】動態(tài)面板循環(huán)的循環(huán)與停止循環(huán)即可。

三、小彩蛋

根據(jù)我們剛剛的