首页
Portal
爱评测报告
行业
产品
推荐
设备
讨论&分享
BBS
搜索
帖子
门户
马上注册
找回密码
登录网站
用QQ登录
爱评测-移动互联网评测
»
讨论&分享
›
学习及教程
›
Axure教程及讨论
›
小楼axure 图文教程(十七)倒计时效果-脑图、局部变量 ...
返回列表
查看:
2022
|
回复:
0
小楼axure 图文教程(十七)倒计时效果-脑图、局部变量、循环以及函数的使用 ...
[复制链接]
tianzc
tianzc
当前离线
积分
5646
1313
主题
1337
帖子
5646
积分
管理员
积分
5646
发消息
电梯直达
楼主
发表于 2014-12-9 22:20:50
|
显示全部楼层
|
倒序浏览
|
阅读模式
[/url]
小楼axure 图文教程(十七)倒计时效果-脑图、局部变量、循环以及函数的使用
作者: 小楼一夜听春语
倒计时在购物网站中的使用十分广泛,所以很多做购物网站的产品你原型中要做倒计时的效果。其实本来没有写这个教程的想法,恰巧今天有人给我看了一个做好的倒计时axure原型,我觉得做的太复杂了,因为在那个axure原型中把时分秒分别通过3个全局变量来实现数值的变换。这样做会导致全局变量使用太多,特别像一些页面较多的网站原型中,全局变量的使用是比较多的,太多的全局变量势必会影响完成原型的效率。再有就是在赋值的过程中也会变的繁琐,因为全局变量需要进行初始化。
要实现的效果:
本教程示例下载地址:[url=http://pan.baidu.com/share/link?shareid=2642875765&uk=537158863]小楼axure 图文教程(十七)倒计时效果
我们还是先进行一下分析,在今天的分析中,我们用另外的一个方式-脑图。这是
产品
经理除了
Axure
rp之外的又一利器。
如上图所示:就是我们要做的这个原型所涉及到的全部。
下面就是实现过程了:
1、 将所需元件全部准备好,并按照上图要求设置完毕。
2、 倒计时的持续需要循环的支持,简单来说就是利用动态面板的显示和隐藏事件来实现循环,在面板显示时改变相应数值,然后让面板隐藏激发面板隐藏事件,面板隐藏时等待1000毫秒用来实现读秒效果,再让面板显示激发面板的显示事件,如此循环往复,就达到效果了。
3、 在显示面板改变数值的操作中,我们需要按上图中的多个条件进行判断,并执行相应的改变数值的操作。
4、 倒计时数值小于10的时候,数值的长度由2位变成1位,这个时候我们可以通过判断数值的长度来确定是否在前面加0。也许有同学不理解,都知道小于10要补0了,干嘛还要判断长度?是这样的,因为我们做的是循环,如果不判断长度,就会在每次改变数值的时候都补上1个0。数值会不断的变长,不信你试试!
实现过程大概就是这样了。下面我们用两幅图来表示全部事件的设置和局部变量以及函数的使用方法。
一、局部变量使用方法
二、局部函数的使用
三、整体事件示例
本文出自 诉客 ▪ 产品经理的心声,转载时请注明出处及相应链接。
本文永久链接:
http://www.soger.net/196.html
收藏
分享
评分
下载地址
,
购物网站
,
产品经理
,
动态
,
影响
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有帐号?
马上注册
x
分享到:
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
0
相关帖子
•
[广州] 【要出发旅行网】 移动APP产品经理
•
[广州] 【要出发旅行网】 产品经理(B2B系统方向)
•
[广州] 【要出发旅行网】 产品经理(客服系统方向)
•
[其它地区] 珠海金山WPS实习生招聘 产品经理训练营
•
[广州] 阿里巴巴移动事业群 招聘产品经理
•
[其它地区] 招杭州宁波产品经理及产品运营[o2o国际物流方向] ...
•
[深圳] [跟投网] 诚聘 产品经理
•
看微信公众平台产品经理教你做产品
回复
使用道具
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
马上注册
本版积分规则
发表回复
回帖后跳转到最后一页
Function
小黑屋
Archiver
手机版
关于!
rss订阅
关于爱评测
爱评测FAQ
站点地图
爱评测 aipingce.com
快速回复
返回顶部
返回列表