相关链接
目录Axure中文学习网AxureShopAxureShop-QA案例目标
1. 了解实现选中效果的原理
2. 熟悉动态面板的使用场景
3. 熟悉变量值的使用场景
4. 熟悉图层的设置方法
5. 熟悉交互功能的使用
6. 熟悉热区元件的使用场景
7. 掌握切割图片的方法
8. 掌握倒圆角的方法
一、成品效果
Axure Cloud 案例2 -【旋转的唱片】
版本介绍
一、播放
1.1 点击播放按钮，唱片开始旋转。
1.2 点击播放按钮，播放按钮变为暂停按钮。
1.3 点击暂停按钮，唱片停止旋转。
1.4 点击暂停按钮，暂停按钮变为播放按钮。
二、收藏
2.1 未收藏状态：点击收藏按钮，出现收藏动效
2.2 未收藏状态：点击收藏按钮，切换为已收藏状态
2.3 已收藏状态：点击收藏按钮，出现弹窗，提示取消收藏
2.4 已收藏状态：点击收藏按钮，切换为未收藏状态
二、素材准备
唱片和封面从百度就可以搜到，其他图标都是从 iconfont 上面下载的
三、制作方法
首先需要将【播放、暂停】按钮分别放入动态面板的2个子页面中同一位置（分别叫做开始页面、暂停页面）
逻辑用以下伪代码来展示：
//定义变量 is_playing，是否播放中，默认值 = 0is_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.配置动态面板-交互
第一页：播放（设置点击后：变量值is_playing=1，面板状态 -> 暂停页面，唱片旋转0.1°、1ms）第一页：暂停（设置点击后：变量值is_playing=0，面板状态 -> 播放页面）5.配置唱片-交互
唱片：设置交互动作 ->旋转时-> 如果变量值=1，则触发旋转1°、线性、20ms点击预览，即可实现唱片旋转、暂停效果，最后可以再按照自己喜好添加一些细节
22/08/17
M
如果觉得《1.4_3 Axure RP 9 for mac 高保真原型图 - 案例2 【旋转的唱片】》对你有帮助，请点赞、收藏，并留下你的观点哦！
