实现歌词自动滚动设计AXURE9-歌词滑动-歌词字体变大设计-Axure9

老规矩，先上原型展示链接，大家可以看看效果：

歌词滚动原型跳转链接https://zzk5vr.axshare.com/

一、设计内容

这个模块涉及的原型知识有点多了，主要还是两大部分：

1、声音的进度条，可以随着按钮随意拖动；

2、歌词可以自动滚动并且放大加深当前播放的歌词

二、原型设计思路

1、进度条这个主要用到两个矩形，一个作为底色矩形a（灰色），一个作为跟随矩形b（白色），加一个圆形作为拖动按钮；
思路就是：圆形可以在a上面随意拖动，限制两端，用跟随水平拖动，拖动圆形时候设置b的尺寸，设置b的w尺寸，h不变；用一个文本记录b的实时坐标位置，然后减去相应的值就得到了b的w尺寸应该变化多少；

2、歌词自动滚动的设计主要思路是：用中继器记录每一行的歌词，中继器的文本要有一个字段是记录当前状态的，我设为zt（状态），当zt的值为1时（默认全部歌词的zt为0），则为选中并且可以放大，触发交互样式；同时把歌词加入选项组且取消隔离列表组之间的选项组，保证能够单一选择中继器中的一个值；

三、原型下载链接、有需要的朋友可以下载学习

Axure歌词滚动模块原型-音乐模块.zip-互联网文档类资源-优快云文库https://download.youkuaiyun.com/download/heart_sun/75939325