投稿
  1. PmTemple首页
  2. AxureRP专区
  3. Axure教程

Axure RP 9 教程—倒计时和图片轮播

王得宇AIPM • • Axure教程 • 阅读 4175

本次教程展示的是使用动态面板制作倒计时效果和图片轮播效果，适合新手哦

本次教程展示的是使用动态面板制作倒计时效果和图片轮播效果，适合新手哦
333

效果图

效果图1：倒计时效果

Axure RP 9 教程—倒计时和图片轮播

效果图2：图片轮播

2
 

使用工具

  1. Axure RP 9 beta   绘制原型
  2. Camtasia 2018   录制视频及导出gif

实现逻辑

  1. 倒计时和轮播图片都是同样的原理，使用动态面板的自动切换状态功能，实现倒计时效果和轮播图片效果。

操作步骤

操作步骤——倒计时

? 创建窗口，本案例是模拟支付网关? 创建动态面板，命名为倒计时，为动态面板添加5个状态，分别命名为5、4、3、2、1。? 每个状态内添加相同大小的文本框，文本内容分别输入为5s、4s、3s、2s、1s。

?添加交互，页面载入时，动态面板状态切换为下一状态，切换效果设置为无，切换间隔时间设置为1000ms，如下图所示：

111
? 选择动态面板设置交互，当页面状态改变时，如果动态面板状态为1时（即动态面板已经切换到1s时），等待1000ms，页面跳转。本案例是从支付成功跳转到订单页面。? 现在，倒计时就完成了，接下来将图片轮播，图片轮播的交互和倒计时非常类似。

操作步骤——图片轮播

? 创建动态面板，命名为图片轮播，为动态面板添加3个状态。? 为动态面板的3个状态添加不同的图片，选什么图片呢，视心情而定。? 在页面增加交互，当页面载入时，设置面板状态，动态面板每隔3000ms就更换一次状态，状态切换动画随意，本案例是向左滑动，滑动效果为线性+1000ms，如下图所示：

222
? 此时，图片轮播已经做好了。但是大家有没有注意到小细节呢，本案例中，不同图片下边会点亮不同的圆形标记，这个算是对图片轮播效果的一种完善吧，点亮小圆圈有多种实现方法，本案例中使用了我认为非常简单的一种方式，具体方式我就不啰嗦了，大家可以下载原型自行研究。

结语

本次教程比较基础，适合Axure新手学习，想当年在下刚入行的时候，没有教程、没有资料，全凭自己捣鼓，真的是万分艰难。。。 算了，不当“嘴”强王者了。最后附上原型下载链接：链接：

https://pan.baidu.com/s/10D3foESpRC24pKeovfCsEw提取码：
jvd9同时郑重提醒各位：本rp文件只能通过Axure RP 9 beta及以上版本打开，使用Axure 8的同学有需要后期我会上传低版本。

2018120803381175-2

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

本文来自 王得宇AIPM 投稿，不代表 PmTemple 立场，如若转载，请注明出处：

。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com
赞 (4)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
王得宇AIPM的头像王得宇AIPM高级产品经理
1 0
上一篇 2018年12月13日 上午10:54
下一篇 2018年12月21日 下午1:15

相关推荐

发表回复

登录后才能评论
微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部
首页
Axure教程
产品经理
小美留学