在好多音乐APP中，我们可以歌词随着歌曲动态播放，其中也有一些歌词疗效。这么在Axure中，我们可以怎样实现这些疗效的呈现？作者分享了制做的方式，希望对你有所帮助。
在许多的音乐播放软件的歌词播放页面中，歌词可以随着歌曲动态播放，呈现出类似下方的疗效。
接出来就来分享用Axure怎样实现这样的疗效。
一、用到的器件
首先在画布中推入一个【文本段落】的器件，命名为【静态歌词】，之后放上须要播放的歌词。
接着复制这个文本段落，重新命名为【动态歌词】，之后给这个段落设置一个自己喜欢的颜色。
接着将【动态歌词】对齐置于【静态歌词】上方，完全遮住【静态歌词】，呈现出如下疗效。
接着再把【动态歌词】的内容删去，注意这儿是删掉内容，但器件还留在画布上，不能把器件给删除了，最终的疗效就是这样。
接出来在画布负空间推入一个【动态面板】，命名为【播放控制器】。
【播放控制器】内需确保起码有两个状态。
最后添加一个【全局变量】，变量名称为【Location】，默认值为【0】，变量的主要作用是拿来实时记录当前歌词播放到那个位置。
这样打算工作就做完了。
二、播放的交互。
接出来写交互，实现歌词播放的疗效。
歌词播放是一个循环的动作，这儿会用到动态面板的循环风波，假如有不太懂这个风波的原理或用法的话，可以参考我之前分享过的文章《【Axure教程】让你的动漫弄成“永动机”》。
首先给【播放控制器】添加【载入时】【设置面板状态】的交互，设置每隔200微秒切换到下一个状态，这个时间就是歌词播放的速率。
接出来再给【播放控制器】添加【状态改变时】的交互，这是最核心的一步。
这儿直接判定【动态歌词】和【静态歌词】两个器件的文字宽度，倘若不相等，表示歌词没显示完，这个时侯每循环一次，就从【静态歌词】中选定一个字添加到【动态歌词】中。
从【静态歌词】添加文字到【动态歌词】中须要用到表达式，表达式内容如下。
substr可以按指定起始位置和宽度来选定一段字符串中的文字，concat拿来向字符串追加指定文字，这个表达式的意思是：从【动态歌词】中选定一个字，添加到【静态歌词】中。
因为我们每次添加完一个字以后，下一次要添加的是之前已添加的字的下一个字，所以这儿用到Location的变量来记录我们之前添加的是第几个字，默认值为0，表示初次添加的是第1个字，因而，每次添加以后，我们须要给Location加上1，这样步入下一次循环的时侯，还会手动添加下一个字。
最后假如两个器件的文字宽度一致，表示歌词早已播放完了，这个时侯就可以停止动态面板【播放控制器】的循环，并把Location重置为0。
保存设置后预览就可以看见我们所须要的疗效。
假如你须要控制歌词的暂停与播放，只要通过控制【播放控制器】动态面板循环的循环与停止循环即可。
三、小彩蛋
根据我们刚才的设计类似动次的软件，假如你把【静态歌词】的器件隐藏掉，再度预览，都会得到类似打字输入的疗效。
以上便是本文全部内容，谢谢阅读。
专栏画家
产品锦李，公众号：产品锦李（ID：IMPM996）类似动次的软件，人人都是产品总监专栏画家。不务正业的产品总监和他的产品设计。
