1.4_3 Axure RP 9 for mac 高保真原型图 - 案例2 【旋转的唱片】

一、成品效果

版本介绍

一、播放
1.1 点击播放按钮，唱片开始旋转。
1.2 点击播放按钮，播放按钮变为暂停按钮。
1.3 点击暂停按钮，唱片停止旋转。
1.4 点击暂停按钮，暂停按钮变为播放按钮。
二、收藏
2.1 未收藏状态：点击收藏按钮，出现收藏动效
2.2 未收藏状态：点击收藏按钮，切换为已收藏状态
2.3 已收藏状态：点击收藏按钮，出现弹窗，提示取消收藏
2.4 已收藏状态：点击收藏按钮，切换为未收藏状态

二、素材准备

唱片和封面从百度就可以搜到，其他图标都是从 iconfont 上面下载的

三、制作方法

首先需要将【播放、暂停】按钮分别放入动态面板的2个子页面中同一位置（分别叫做开始页面、暂停页面）
逻辑用以下伪代码来展示：

//定义变量 is_playing，是否播放中，默认值 = 0
is_playing = 0; // 0 表示否，1表示1

//点击播放按钮时
if(播放按钮 -> 点击){
	变量值 -> is_playing = 0 //将值设置为1，1表示播放中
	动态面板 -> 状态【开始页面 -> 暂停页面】
	唱片 ->  执行(唱片-顺时针、1毫秒时间，顺时针旋转0.1度）//用来触发唱片旋转的代码	
}

//点击暂停按钮时
if(暂停按钮 -> 点击){
	变量值 -> is_playing = 0 //将值设置为0，0表示暂停
	动态面板 -> 状态【暂停页面 -> 开始页面】
	唱片 ->  执行(唱片-顺时针、1毫秒时间，顺时针旋转0.1度）//用来触发唱片旋转的代码	
}

//如果唱片旋转，触发以下代码 1次
if(唱片 == 旋转时){
	// 如果变量is_playing值为0时，触发以下代码 n次（每次执行前判断一次条件，符合则重复执行）
	// 执行完毕后再次继续判断，is_playing值是否为0，如果是，则继续重复执行
	while(is_playing == 0){
		唱片 -> 执行(唱片-顺时针、20毫秒时间，线性、顺时针旋转1度）
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25