Axure 实现“动次打次”歌词播放效果

2023-05-2808:53:16原型设计Comments1,190 views字数 1144阅读模式

许多的音乐播放软件的歌词播放页面中,歌词可以随着歌曲动态播放,呈现出类似下方的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接下来就来分享用 Axure 如何实现这样的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

一、用到的元件

首先在画布中拖入一个【文本段落】的元件,命名为【静态歌词】,然后放上需要播放的歌词。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接着复制这个文本段落,重新命名为【动态歌词】,然后给这个段落设置一个自己喜欢的颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接着将【动态歌词】对齐放在【静态歌词】上方,完全盖住【静态歌词】,呈现出如下效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接着再把【动态歌词】的内容删掉,注意这里是删除内容,但元件还留在画布上,不能把元件给删掉了,最终的效果就是这样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接下来在画布负空间拖入一个【动态面板】,命名为【播放控制器】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

【播放控制器】内需确保至少有两个状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

最后添加一个【全局变量】,变量名称为【Location】,默认值为【0】,变量的主要作用是用来实时记录当前歌词播放到哪个位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

这样准备工作就做完了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

二、播放的交互。

接下来写交互,实现歌词播放的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

歌词播放是一个循环的动作,这里会用到动态面板的循环事件,如果有不太懂这个事件的原理或用法的话,可以参考我之前分享过的文章《【Axure 教程】让你的动画变成“永动机”》。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

首先给【播放控制器】添加【载入时】【设置面板状态】的交互,设置每隔200毫秒切换到下一个状态,这个时间就是歌词播放的速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

接下来再给【播放控制器】添加【状态改变时】的交互,这是最核心的一步。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

这里直接判断【动态歌词】和【静态歌词】两个元件的文字长度,如果不相等,表示歌词没显示完,这个时候每循环一次,就从【静态歌词】中选取一个字添加到【动态歌词】中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

从【静态歌词】添加文字到【动态歌词】中需要用到表达式,表达式内容如下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

substr 可以按指定起始位置和长度来选取一段字符串中的文字,concat 用来向字符串追加指定文字,这个表达式的意思是:从【动态歌词】中选取一个字,添加到【静态歌词】中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

由于我们每次添加完一个字之后,下一次要添加的是之前已添加的字的下一个字,所以这里用到 Location 的变量来记录我们之前添加的是第几个字,默认值为0,表示初次添加的是第1个字,因此,每次添加之后,我们需要给 Location 加上1,这样进入下一次循环的时候,就会自动添加下一个字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

最后如果两个元件的文字长度一致,表示歌词已经播放完了,这个时候就可以停止动态面板【播放控制器】的循环,并把 Location 重置为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

保存设置后预览就可以看到我们所需要的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

如果你需要控制歌词的暂停与播放,只要通过控制【播放控制器】动态面板循环的循环与停止循环即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

三、小彩蛋

按照我们刚刚的设计,如果你把【静态歌词】的元件隐藏掉,再次预览,就会得到类似打字输入的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

Axure 实现“动次打次”歌词播放效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

以上便是本文全部内容,感谢阅读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

产品锦李,公众号:产品锦李(ID:IMPM996)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/42868.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/42868.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定