在很多音樂APP中，我們可以歌詞隨著歌曲動(dòng)態(tài)播放，其中也有一些歌詞效果。那么在Axure 中，我們可以如何實(shí)現(xiàn)這種效果的呈現(xiàn)？作者分享了制作的方法，希望對你有所幫助。

在許多的音樂播放軟件的歌詞播放頁面中，歌詞可以隨著歌曲動(dòng)態(tài)播放，呈現(xiàn)出類似下方的效果。

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

一、用到的元件

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

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

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

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

接下來在畫布負(fù)空間拖入一個(gè)【動(dòng)態(tài)面板】，命名為【播放控制器】。

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

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

這樣準(zhǔn)備工作就做完了。

二、播放的交互。

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

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

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

接下來再給【播放控制器】添加【狀態(tài)改變時(shí)】的交互，這是最核心的一步。

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

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

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

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

最后如果兩個(gè)元件的文字長度一致，表示歌詞已經(jīng)播放完了，這個(gè)時(shí)候就可以停止動(dòng)態(tài)面板【播放控制器】的循環(huán)，并把 Location 重置為0。

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

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

三、小彩蛋

按照我們剛剛的設(shè)計(jì)，如果你把【靜態(tài)歌詞】的元件隱藏掉，再次預(yù)覽，就會(huì)得到類似打字輸入的效果。

以上便是本文全部內(nèi)容，感謝閱讀。