Axure RP9——【唱片旋转播放暂停效果】

 

唱片旋转播放暂停效果

 

目录

唱片旋转播放暂停效果

I.效果

II.实现步骤

---

 

I.效果

实现唱片播放暂停，旋转效果。一般常见在歌曲播放场景。

             旋转效果

 

II.实现步骤

思路：

通过点击开始按钮，可以切换到播放按钮且唱片进行旋转；

再次点击，会从播放状态，变为暂停，停止播放，且唱片停止旋转。

1.元件准备：

提前准备好的图片；（考虑到美观，设置成圆形）

按钮：播放、暂停按钮（等大）；

动态面板——因为要实现旋转动态功能，需要借助DP来实现

可以自行想象，设置其他元件进入。

如图：

2.面板交互设置

（1）准备

①放置一个动态面板到页面中，可随意进行放置；要实现循环状态，故该面板要有2个状态；并命名为：“循环面板”

②需要将开始、暂停按钮，放置在同一个动态面板中，且位置相同；并将此面板命名为“开始暂停”面板

 

（2）对“开始暂停面板”设置交互：

③进入“开始暂停”面板，选中状态1，即“开始”状态，设置交互：

实现：点击“开始”后，会切换到“暂停”状态；

单击时——设置面板状态：需要对2个动态面板进行设置

对“开始暂停面板”——到“暂停”状态；无需动画

对“循环面板”——到下一项，向后循环，无需动画

       

④对“开始暂停面板”中的“暂停”状态进行交互设置：

 

对“开始暂停面板”——切换到“开始”状态；无需动画

对“循环面板”——停止循环，无需动画

  

（3）对“循环面板”设置交互

目的：控制唱片旋转角度及速度

状态改变时——旋转——目标：唱片——顺时针，经过角度0.6度

无需动画。

（角度计算：循环间隔，设置的是100ms，即1s；1分钟有60s，那1s旋转0,6度）

（4）设置以后，进行预览即可。

也可自行设置其他交互动作。