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

在許多的音樂播放軟件的歌詞播放頁面中，歌詞可以隨著歌曲動態播放，呈現出類似下方的效果。

接下來就來分享用 Axure 如何實現這樣的效果。

一、用到的元件

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

接著復制這個文本段落，重新命名為【動態歌詞】，然后給這個段落設置一個自己喜歡的顏色。

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

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

接下來在畫布負空間拖入一個【動態面板】，命名為【播放控制器】。

【播放控制器】內需確保至少有兩個狀態。

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

這樣準備工作就做完了。

二、播放的交互。

接下來寫交互，實現歌詞播放的效果。

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

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

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

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

從【靜態歌詞】添加文字到【動態歌詞】中需要用到表達式，表達式內容如下。

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

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

最后如果兩個元件的文字長度一致，表示歌詞已經播放完了，這個時候就可以停止動態面板【播放控制器】的循環，并把 Location 重置為0。

保存設置后預覽就可以看到我們所需要的效果。

如果你需要控制歌詞的暫停與播放，只要通過控制【播放控制器】動態面板循環的循環與停止循環即可。

三、小彩蛋

按照我們剛剛的設計，如果你把【靜態歌詞】的元件隱藏掉，再次預覽，就會得到類似打字輸入的效果。

以上便是本文全部內容，感謝閱讀。