本文以QQ音乐为例，实现了带有时间轴的进度条、歌词色彩变化、唱片旋转、暂停播放等原型交互效果。
- 体验地址：https://v0u9to.axshare.com
- 原型下载链接：https://pan.baidu.com/s/1jbrZnENr2MLZvzlWgIze-g 提取码：34gu
- 交互说明：点击播放、暂停按钮可实现原型的播放与暂停；左右拖动页面可切换唱片、全屏歌词页面。
用户点击播放按钮时，唱片将围绕自己的中心缓慢旋转；点击暂停按钮时，唱片停止旋转。
通过循环面板可以控制唱片旋转。
（1）拖入一个尺寸为374×645的矩形，用作手机页面，并调整填充颜色；输入歌曲和歌手名称；添加一张歌手照片，以及一个圆形元件作为唱片，将其组合成一个动态面板，命名为“唱片”；添加一个名为“播放-暂停”的动态面板，该面板具有两个状态：暂停和播放，并用圆形、三角形、垂直线等元件绘制出暂停和播放按钮。如下图所示：
（2）拖入一个循环动态面板，命名为“循环1”，该循环面板共有2个状态。
（3）当用户点击暂停状态图标时，将“播放-暂停”设置为“播放”状态，并设置“循环1”动态面板循环，循环时间为400毫秒；当用户点击播放状态图标时，将“播放-暂停按钮”设置为“暂停”状态，并停止“循环1”动态面板。
（4）设置“循环1”面板状态改变时，“唱片”动态面板以400毫秒的线性时间，在中心顺时针线性旋转10度。线性旋转400毫秒与“循环1”的状态改变时间相对应，而400毫秒的速度则适中。
当用户点击暂停状态图标时，原型切换为播放状态，进度条会每秒向右播放一段距离，“时间”文本实时显示播放进度；当用户点击播放状态图标时，原型切换为暂停状态，进度条和计时器停止。
当用户点击暂停状态图标时，循环面板将以1000毫秒的时间差循环改变状态；每次循环面板的状态改变都会让“滑块”动态面板向右移动一段距离，“时间”文本的值也会发生改变。
（1）拖入一条长度为255的水平线，调整好其线宽和颜色，并命名为“底”，作为进度条的底色。
在“底”的顶层添加一个名为“进度条”的动态面板，在“进度条”的第一个状态中添加一条水平线和一个圆形元件，总宽度也为255，调整好颜色并转换为动态面板，该动态面板命名为“滑块”，并将“滑块”的x轴坐标设置为“-240”，这样滑块在页面初始时只露出一个圆圈。
在进度条的两端各添加两个文本，分别显示进度时间和总时间，左端的初始值为0:00，并命名为“时间”，总时间为1:00。
（2）拖入一个动态面板，使其具有两个状态，并命名为“循环2”。当用户点击播放按钮时，设置“循环2”以1000毫秒的时间循环改变状态，第一个状态延迟1000毫秒后切换。
<img image_type="1" img_height="670" img_width="1105" mime_type="image/jpeg" src="https://p3-sign.toutiaoimg.com/pgc-image/RW4b9uRDf94Tq5~noop.image?_iz=58558&from=article.pc_detail&lk3s
（4）通过以上三步已完成了进度条的移动，现在来实现“时间”文本的显示。因为“循环2”每变换一次状态的时间是1000ms，而“时间”文本每变换一次值也是1000ms，所以这两者是对应的。而“时间”文本按字符串显示可分为三种情况：0:01~0:09、0:10~0:59、1:00。
为此，在【项目】【全局变量】设置全局变量“t”用来记录时间，当“循环2”每变换一次状态时t=t+1000ms。当t<10000ms时，“时间”的值=0:0[t/1000]；当10000ms=<t<60000ms时，“时间”的值=0:[t/1000]；当t=60000ms时，“时间”的值=1:00，且循环1、循环2停止循环，把“播放-暂停”面板设置为暂停状态。
与QQ音乐的单行歌词显示效果相同。
在QQ音乐APP中，歌曲的歌词颜色变化并非匀速，而是由歌曲本身的音乐性决定的。本案例中，假定每行歌词中的颜色变化是匀速的。可以计算出一分钟内每行歌词颜色变化所需的总时长，然后通过动态面板尺寸改变的方式实现歌词颜色变化的样式。
（1）拖入一个宽为141、高为16的动态面板，命名为“歌词”。宽为141是为了涵盖全部歌词行，高为16是为了仅显示一行。在“歌词”的state1中添加八句歌词，调整位置并垂直分布，记录每句歌词的y坐标。
（2）对八句歌词的每行分别复制，调整颜色作为变色歌词行，并将每行变色歌词转换为动态面板，分别命名为：“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”。每个变色歌词行叠放在对应非变色歌词行的正上方。
（3）将“1”至“8”动态面板的宽度设置为1，将非变色歌词设为白色且透明度为50%。这样，可以通过改变“1”至“8”的宽度来实现歌词颜色随歌曲播放而变化的交互。将“歌词”state1中的所有内容转换为动态面板，命名为“歌词1”。
（4）进度条的总时间为1分钟，八句歌词的总宽度为1016，因此每秒歌词颜色变化的平均长度为16.93。
根据每行歌词的宽度，可计算出“1”至“8”句歌词的颜色变化耗时分别为：7.5s、7.5s、8.33s、7.5s、7.5s、8.33s、5.84s、7.5s。
由于歌词颜色变化以1秒为时间单位，因此时间不能包含小数点。对于上述耗时，向上取整还是向下取整？
如果向上取整，则八句歌词的总时长为64秒，显然这不符合要求。将八句歌词的耗时分别设定为7s、7s、8s、7s、7s、8s、5s、7s。
（5）由于每行歌词的耗时都向下取整了，因此每秒在歌词中每行颜色的变化宽度不再是16.93。将每行的宽度除以时长，得到每行在1秒内颜色变化的宽度为18.2、18.2、17.7、18.2、18.2、17.7、19.8、17.7（此处的精度保留一个小数位，例如：18.112简化为18.2），因为如果向下保留一位小数，将导致在规定时间内无法完成每行所有文字的颜色变化。
（6）当“循环2”状态发生变化时，设置事件。例如：当0<t=<7000时，将“歌词1”移动到（0，0），动态面板的长度=自身的长度+18.2。
- 当7000<t<=14000时，启用第二行歌词；当14000<t<=22000时，启用第三行歌词；
- 当22000<t<=29000时，启用第四行歌词；当29000<t<=36000时，启用第五行歌词；
-
（3）调整左右滑动时的切换动画。
（4）全屏幕歌词的颜色变化与单行歌词同步。只需要在单行歌词事件中设置全屏幕歌词的颜色变化。与单行歌词不同，全屏幕歌词中非第一行歌词的事件设置需要包含将上一个变色歌词动态面板的宽度设置为 1。具体设置如下所示：
如上图所示，每个用例都有两个或三个设置尺寸的事件。在实际的原型制作中，不必逐一设置尺寸。相反，可以在每个用例中一次性设置这几个需要设置的元素的尺寸。这里只进行逐步演示以方便讲解。
至此，我们已完成此案例的所有交互。
作者：稻草人，产品经理。
本文由 @稻草人 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议