Axure 實現“動次打次”歌詞播放效果

3 評論 2390 瀏覽 12 收藏 8 分鐘

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

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

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

一、用到的元件

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

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

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

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

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

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

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

這樣準備工作就做完了。

二、播放的交互。

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

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

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

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

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

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

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

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

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

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

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

三、小彩蛋

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

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

專欄作家

產品錦李,公眾號:產品錦李(ID:IMPM996),人人都是產品經理專欄作家。不務正業的產品經理和他的產品設計。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 懶人福音,關鍵參數公式:[[LVAR1.concat(LVAR2.substr(Location,1))]]

    來自重慶 回復
  2. 前面兩個文本段落要分別放入動態面板的不同狀態嗎

    來自重慶 回復
    1. 不用,那個動態面板的作用時通過狀態的切換來循環取數,狀態中不需要放置內容

      來自廣東 回復