点击播放按钮时，唱片缓慢地环绕其自身中央旋转；点击停息按钮时，唱片停滞旋转。
2. 思路
可以通过循环面板来掌握唱片的旋转。
（1）拖入一个374×645的矩形充当手机页面，并调度添补颜色；输入歌曲及歌手名称；添加一张歌手照片及圆形元件充当唱片，把该组合转化为动态面板，命名为“唱片”；添加一个名为“播放-停息”的动态面板，该面板共有两个状态：停息、播放，并通过圆形、三角形、垂直线等元件画出停息、播放的按钮。如下图所示：
（2）拖入一个循环动态面板，命名为“循环1”，该循环面板共有2个状态。
（3）当点击停息状态图标时，把“ 播放-停息”设置为“播放”状态，并设置“循环1”动态面板循环，循环韶光为400ms；当点击播放状态图标时，把“播放-停息按钮”设置为“播放-停息”为“停息”状态，并把“循环1”动态面板停滞停息。
（4）设置当“循环1”面板状态改变时“唱片”动态面板顺时针环绕中央线性旋转10fx，线性韶光也刚好是400ms。线性旋转400ms是与“循环1”的状态改变韶光对应，而400ms刚好烦懑不慢。
三、带韶光的进度条1. 实现效果
点击停息状态图标时，原型切换为播放状态，进度条每一秒提高一定的间隔，与此同时“韶光”文本实时显示已进度条的已播放韶光；点击播放状态图标时，原型切换为停息状态，进度条停滞提高、停滞计时。
2. 思路
点击停息状态图标时，设置循环面板以1000ms的韶光差循环改变状态；而循环面板每一次改变则会让“滑块”动态面板向右移动一定的间隔，同时，循环面板的状态改变也会改变“韶光”文本的值。
3. 交互设置
（1）拖入一条长为255的水平线，调度好线宽及颜色，命名为“底”，让其充当进度条的底色。
在“底”的顶层添加一个名为“进度条”的动态面板，在“进度条”的state1里面添加水平线及圆形元件，总宽度也是255，调度好颜色并转化为动态面板，该动态面板命名为“滑块”，并把“滑块”的x轴坐标设为“-240”好让滑块在页面初始时仅露出一个圆圈。
在进度条的两端分别添加两个文本来显示进度韶光及总韶光，左端初始值为0:00并命名为“韶光”，总韶光为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<10000ms时，“韶光”的值=0:0[t/1000]；当10000ms=<t<60000ms时，“韶光”的值=0:[t/1000]；当t=60000ms时，“韶光”的值=1:00，且循环1、循环2停滞循环，把“播放-停息”面板设置为停息状态。
四、单行歌词的颜色变革1. 实现交互
跟QQ音乐的单行歌词显示一样。
2. 思路
在QQ音乐APP中，歌曲的歌词颜色变革不是匀速的，而是由歌曲本身的音乐性来决定的。此案例中假定每行歌词里的颜色变革是匀速的。因此，可算出在1分钟内算出每行歌词颜色变革的所耗时长，再通过每行歌词动态面板的尺寸改变来实现歌词颜色变革的样式。
3. 实现过程
（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）进度条的总韶光1min，八句歌词的总宽是1016，以是均匀每秒歌词颜色变革的长度为16.93。
又根据每行歌词的宽度可算出“1”~“8”句歌词的颜色变革耗时分别为：7.5s、7.5s、8.33s、7.5s、7.5s、8.33s、5.84s、7.5s。
由于歌词颜色变革因此1s为韶光单位的，以是韶光不能存在小数点，那么对付以上所述的所耗时长，是要向上取整数还是向下取整数呢？
如果是向上取整数的话，那么这八句歌词的总时长为64s，这显然不符合哀求，以是设定这八句歌词的所耗时长分别是7s、7s、8s、7s、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<t=<7000时，移动“歌词1″至（0，0）、动态面板的长度=自身的长度+18.2。
当7000<t<=14000时，设置第二行歌词；当14000<t<=22000时，设置第三行歌词；当22000<t<=29000时，设置第四行歌词；当29000<t<=36000时，设置第五行歌词；当36000<t<=44000时，设置第六行歌词；当44000<t<=49000时，设置第七行歌词；当49000<t<=56000时，设置第八行歌词。详细的设置事宜跟第一行类似。通过上述步骤，已完成了单行歌词的颜色变革，变革起始第1s，终止于57s。
五、全屏歌词的颜色变革1.实现的效果
当向左拖动页面（代表向左滑）时切换为全屏歌词页面，向右拖动页面（代表左滑）时切换为单句歌词页面。全屏歌词的颜色变革交互样式跟QQ音乐一样。
2. 思路
以拖动页面切换动态面板状态来实现旁边滑动；全屏歌词的颜色变革实现跟单句歌词类似。
3. 实现过程
（1）把“唱片”、“歌词”转化为动态面板命名为“主面板”，并添加state2。
（2）把“歌词1”动态面板的state1里变色歌词及非变色歌词都复制到“主面板”的state2，并调度好位置。把变色歌词分别命名为“11”、“22”、“33”、“44”、“55”、“66”、“77”、“88”。
（3）设置旁边滑动时的切换效果。
（4）全屏歌词的颜色变革是跟单行歌词同步的。以是全屏歌词的颜色变革设置只需在单行歌词事宜中设置即可。不同的是，全屏歌词里非第一行歌词的事宜设置须加上把上一行变色歌词动态面板的宽度设置为1。详细设置如下图所示。
在上图中，每个case都有两个或三个设置尺寸的事宜，其实在实际的原型制作中不必一步一步地设置尺寸，可在每个case里面一步到位地设置这两三个须要设置的元件尺寸，此处只是为了演示讲解方便而已。
至此，已完成了此案例的全部交互。
作者：稻草人，产品经理。
本文由 @稻草人 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自Unsplash，基于CC0协议
