相关链接
目录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 【旋转的唱片】》对你有帮助,请点赞、收藏,并留下你的观点哦!