Axure教程—倒计时+轮播图片
效果图
效果图1：倒计时效果
倒计时
效果图2：图片轮播
图片轮播
使用工具
Axure RP 9 beta 绘制原型
Camtasia 2018 录制视频及导出gif
实现逻辑
倒计时和轮播图片都是同样的原理，使用动态面板的自动切换状态功能，实现倒计时效果和轮播图片效果。
操作步骤
操作步骤——倒计时
🕐 创建窗口，本案例是模拟支付网关
🕑 创建动态面板，命名为倒计时，为动态面板添加5个状态，分别命名为5、4、3、2、1。
🕒 每个状态内添加相同大小的文本框，文本内容分别输入为5s、4s、3s、2s、1s。
🕓添加交互，页面载入时，动态面板状态切换为下一状态，切换效果设置为无，切换间隔时间设置为1000ms，如下图所示：
🕔 选择动态面板设置交互，当页面状态改变时，如果动态面板状态为1时（即动态面板已经切换到1s时），等待1000ms，页面跳转。本案例是从支付成功跳转到订单页面。
🕕 现在，倒计时就完成了，接下来将图片轮播，图片轮播的交互和倒计时非常类似。
操作步骤——图片轮播
🕐 创建动态面板，命名为图片轮播，为动态面板添加3个状态。
🕑 为动态面板的3个状态添加不同的图片，选什么图片呢，视心情而定。
🕒 在页面增加交互，当页面载入时，设置面板状态，动态面板每隔3000ms就更换一次状态，状态切换动画随意，本案例是向左滑动，滑动效果为线性+1000ms，如下图所示：
🕓 此时，图片轮播已经做好了。但是大家有没有注意到小细节呢，本案例中，不同图片下边会点亮不同的圆形标记，这个算是对图片轮播效果的一种完善吧，点亮小圆圈有多种实现方法，本案例中使用了我认为非常简单的一种方式，具体方式我就不啰嗦了，大家可以下载原型自行研究。
结语
本次教程比较基础，适合Axure新手学习，想当年在下刚入行的时候，没有教程、没有资料，全凭自己捣鼓，真的是万分艰难。。。 算了，不当“嘴”强王者了。
最后附上原型下载链接：
链接：
https://pan.baidu.com/s/10D3foESpRC24pKeovfCsEw
提取码：
jvd9
同时郑重提醒各位：本rp文件只能通过Axure RP 9 beta及以上版本打开，使用Axure 8的同学有需要后期我会上传低版本。
关注作者公众号，一起向梦想出发
