效果图

---

效果图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的同学有需要后期我会上传低版本。

关注作者公众号，一起向梦想出发