本文以QQ音乐为例，实现了进度条随时间变化、歌词颜色变化、唱片旋转、播放暂停等原型交互。
当点击播放按钮时，唱片绕着自己的中心慢慢旋转；单击暂停按钮时，唱片停止旋转。
2. 思路您可以通过“循环”面板控制唱片的旋转。
(1)拖动成374×645的矩形作为手机页面，调整填充颜色；输入歌曲名称和歌手；添加歌手照片和圆形元素充当记录，将组合变成动态面板，命名为“记录”；添加一个名为“播放-暂停”的动态面板，有暂停和播放两种状态，通过圆形、三角形、竖线等元素绘制暂停和播放的按钮。如下图所示:
(2)拖入一个圆形动态面板，命名为“圆形1”，有两种状态。
(3)点击暂停图标时，将“播放-暂停”设置为“播放”状态，设置“周期1”动态面板周期，周期时间为400ms；单击播放状态图标时，将播放暂停按钮设置为播放暂停状态，并停止第1周期动态面板的暂停。
(4)当“周期1”面板的状态发生变化时，“记录”的动态面板围绕中心顺时针线性旋转10fx，线性时间正好是400ms，线性旋转400ms对应的是“周期1”的状态变化时间，而400 ms正好是不快也不慢。
点击暂停图标，样机切换到播放状态，进度条每秒前进一定距离，同时“时间”文字实时显示进度条的播放时间；点击播放状态图标，原型切换到暂停状态，进度条停止前进，计时停止。
2. 思路当点击暂停状态图标时，设置循环面板以1000ms的时间差循环改变状态；循环面板的每一次变化都会使“滑块”动态面板向右移动一定的距离，同时循环面板状态的变化也会改变“时间”文本的值。
3. 交互设置(1)拖动一条长度为255的水平线，调整线宽和颜色，命名为“底部”，作为进度条的背景色。
在“底部”的顶部添加一个名为“进度条”的动态面板，在“进度条”的state1中添加横线和圆形元素，总宽度为255，调整颜色转换为动态面板，将动态面板命名为“滑块”，并将滑块的X轴坐标设置为“-240”，这样在页面的开头就只露出一个圆形。
在进度条的两端添加两个文本，以显示进度时间和总时间。左端初始值为0:00，命名为“Time”，总时间为1:00。
(2)拖动到一个动态面板中，该面板有两种状态，命名为“循环2”。点击播放按钮时，设置“周期2”以1000ms的时间周期改变状态，第一个状态延时1000ms后切换。
(3)设置滑块在周期2状态变化时移动:因为滑块总移动距离为240，总移动时间为60秒，所以每秒移动距离为4。因此，设置以下事件。
(4)通过以上三个步骤，进度条的移动已经完成，现在显示“时间”文本。因为“周期2”改变状态的时间是1000ms，而“时间”文本的值也是1000ms，所以两者是对应的。“时间”文字的显示分为三种情况:0:01~0:09，0:10~0:59，1:00。
因此，在项目全局变量中设置全局变量“t”来记录时间，每次“周期2”改变状态时，t=t+1000ms。当t
和QQ音乐的单行歌词显示一样。
2. 思路在QQ音乐APP中，一首歌的歌词颜色变化并不是统一的，而是由歌曲本身的音乐性决定的。在这种情况下，假设每一行歌词中的颜色变化是均匀的。因此，可以计算出，一分钟内计算每行歌词的颜色变化需要很长时间，然后通过改变每行歌词的动态面板大小来实现歌词颜色变化的风格。
3. 实现过程(1)拖动成宽141，高16的动态面板，命名为“歌词”。141的宽度用于显示所有歌词行，16的高度仅用于显示一行。将8首歌词添加到歌词的state1，调整位置垂直分布，记录每首歌词的Y坐标。
(2)将这八行歌词各复制一份，调整颜色作为变色歌词行，将每一行变色歌词变换成动态面板，分别命名为“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”。变色歌词的每一行都直接堆叠在非变色歌词的上方。
(3)将“1”~“8”动态面板的宽度设置为1，将非彩色歌词设置为白色，透明度为50%。因此，通过改变“1”到“8”的宽度，可以实现歌词颜色随歌曲播放而变化的交互。将“歌词”state1中的所有内容变成动态面板，命名为“歌词1”。
(4)进度条的总时间为1min，8条歌词的总宽度为1016，所以平均每秒歌词变色的长度为16.93。
根据每一行歌词的宽度，可以计算出“1”~“8”句歌词的变色时间分别为7.5s、7.5s、8.33s、7.5s、8.33s、5.84s、7.5s。
因为歌词的变色是以1s为时间单位的，所以时间上不能有小数点。那么，对于上述耗时，应该取整数向上还是向下呢？
如果向上取整数，那么这八首歌词的总时长是64s，显然不符合要求，所以设置这八首歌词的耗时分别是7s，7s，8s，7s，8s，5s，7s。
(5)由于每一行歌词的耗时已经向下取整，每1s歌词中每一行颜色变化的宽度不再是16.93。用每条线的宽度除以时间的长短，发现1s内每条线颜色变化的宽度分别为18.2，18.2，17.7，18.2，18.2，17.7，19.8，17.7。这里向上预留一个小楼(比如18.112，就简化为18.2)，因为向下预留一个小数位，就在常规时间内完成。
(6)设置“周期2”状态改变时的事件。例如，当0
通过以上步骤，单线歌词的颜色变化已经完成，从1s开始，到57s结束。
五、全屏歌词的颜色变化1.实现的效果向左拖动页面时切换到全屏歌词页面(用于向左滑动)，向右拖动页面时切换到单句歌词页面(用于向左滑动)。全屏歌词的变色交互风格和QQ音乐一样。
2. 思路拖动页面将动态面板的状态切换为左右滑动；全屏歌词的颜色变化类似于单个歌词。
3. 实现过程(1)将“录音”和“歌词”转换成一个名为“主面板”的动态面板，并添加state2。
(2)将歌词1到主面板状态2的动态面板状态1中的变色歌词和不变色歌词进行复制，并调整位置。变色歌词分别命名为“11”、“22”、“33”、“44”、“55”、“66”、“77”、“88”。
(3)设置左右滑动时的切换效果。
(4)全屏歌词颜色变化与单线歌词同步。所以全屏歌词的变色设置只需要在单行歌词事件中设置即可。不同的是，全屏歌词中第一行以外的歌词的事件设置必须结合将最后一行变色歌词的动态面板宽度设置为1。具体设置如下图所示。
在上图中，每个案例都有两到三个设置维度的事件。实际上，在实际的原型制作中并不需要一步一步地设置尺寸，但是这两个或三个需要设置的元件尺寸可以在每种情况下一步一步地设置。这只是为了方便演示和解释。
至此，本案所有交互均已完成。
作者:稻草人，产品经理。
本文原载于蜘蛛智慧链，作者为@稻草人。未经允许禁止转载。
图片来自Unsplash，基于CC0协议。
