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

 

唱片旋转播放暂停效果

 

目录

唱片旋转播放暂停效果

I.效果

II.实现步骤


 

I.效果

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

             旋转效果

 

II.实现步骤

思路:

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

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

1.元件准备:

提前准备好的图片;(考虑到美观,设置成圆形)

按钮:播放、暂停按钮(等大);

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

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

如图:

Axure RP9——【唱片旋转播放暂停效果】_第1张图片

2.面板交互设置

(1)准备

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

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

Axure RP9——【唱片旋转播放暂停效果】_第2张图片

 

(2)对“开始暂停面板”设置交互:

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

实现:点击“开始”后,会切换到“暂停”状态;

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

Axure RP9——【唱片旋转播放暂停效果】_第3张图片

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

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

Axure RP9——【唱片旋转播放暂停效果】_第4张图片       Axure RP9——【唱片旋转播放暂停效果】_第5张图片

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

 

Axure RP9——【唱片旋转播放暂停效果】_第6张图片

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

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

Axure RP9——【唱片旋转播放暂停效果】_第7张图片  Axure RP9——【唱片旋转播放暂停效果】_第8张图片

(3)对“循环面板”设置交互

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

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

无需动画。

(角度计算:循环间隔,设置的是100ms,即1s;1分钟有60s,那1s旋转0,6度)

Axure RP9——【唱片旋转播放暂停效果】_第9张图片

(4)设置以后,进行预览即可。

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

 

 

你可能感兴趣的:(Axure,RP9,学习指南)