本文通过讲解制作QQ音乐交互原型的过程，了解如何实现旋转、计时器以及拖动等常见的交互效果。案例中综合运用了动态面板的循环、状态改变、拖动、文本改变以及旋转等事件，通过本案例的讲解，相信大家对于动态面板等高级元件的综合运用又会有一个新的认识。

观察交互效果

通过观察我们发现本案例中主要有以下3个交互效果：

（1）播放音乐时：

1. 开始播放，按钮切换为暂停；
2. 唱片顺时针匀速旋转；
3. 进度条水平向右逐渐变长；
4. 进度球随进度条延伸的方向移动；
5. 计时音乐播放时长。

（2）播放结束/暂停时：

1. 切换为播放按钮；
2. 进度条不在变化长度；
3. 进度球停止移动；
4. 计时器停止计时；
5. 唱片停止旋转；

（3）拖动播放进度时：

1. 进度条沿着水平方向变化尺寸；
2. 进度球沿着水平方向移动；
3. 计时器同步变化时间。

思路分析

刚才我们已经仔细观察了页面中的交互效果，现在我们需要分析实现这些效果的思路与方法。