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

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

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

本次教程展示的是使用动态面板制作倒计时效果和图片轮播效果,适合新手哦
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

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

本文来自投稿,不代表PmTemple立场,如若转载,请注明出处:https://www.pmtemple.com/silence/3336/

。如有涉及侵权行为,请发送相关证明材料至邮箱admin@pmtemple.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

185-1614-2515

在线咨询:点击这里给我发消息

邮件:admin@pmtemple.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code