闲着没事,教大家怎么制作一个时钟吧。这个秒钟是会一秒一秒往上跳,而且会进行分钟,小时的递进。
第一步
打开Axure,拖曳三个文本部件过来。第一个文本标签命名为'小时'。第二个命名为'分钟',第三个命名为'秒钟'。
第二步
在页面交互-页面载入时中,添加三个变量,分别叫做'xiaoshi'‘fenzhong’‘miaozhong'。
这三个变量分别用来存放小时值,分钟值,秒钟值。对了,别忘了给他们定一个默认值。这个默认值会是你刚开始载入页面时的展示时钟,比如11,22,33。
然后我们要做一个大事——将变量值和第一步的文本标签绑定。
![Uploading 4_275996.png . . .]
左侧动作中的'部件'下,有一个设置文本,这个动作是用来设置文本标签的内容的,我们把第一步命名的三个文本标签,分别设置值为变量xiaoshi,fenzhong,miaozhong。
确认后预览一下
成这样了,这是因为三个变量的默认值被我设为了11,22,33。
第三步 让秒钟动起来!
怎么样让秒钟动起来呢?让变量'秒钟'每隔1秒+1就可以了!
怎么控制变量每隔一秒+1呢?
我们拖入两个动态面板。一个叫'gong',一个叫'shou'(不要问我什么意思)。其中gong面板有两个状态。
我们让页面载入'时,就把gong面板的状态更改为Next。
这个步骤就像是推倒多米诺骨牌的第一手,gong面板的'面板状态改变时'事件会被触发。此时先等待1秒钟,然后移动shou面板到相对位置(0,0)。(其实没有移动)如下图:
虽然shou没有移动,但也会触发'移动时'事件。点击shou面板右侧的交互'移动',设置变量[[miaozhong]]为[[miaozhong+1]],别忘了把新的miaozhong值设为文本标签'秒钟'的值。如下图。
对了,别忘了再推gong一下,将gong面板的状态修改为next。
这时候,gong和shou的交互如下:
浏览后就能看到秒钟在每隔一秒+1。
但这时候,秒钟是没有限制的,我们需要它调到59后的下一秒,变回0,同时分钟+1。
第四步 让分钟动起来!
我们为shou面板移动时的交互添加如下内容: 如果miaozhong变量=59,则将'miaozhong=0',且‘fenzhong+1’,如下图所示。
显示新增条件:如果miaozhong+59
更改后,shou面板的交互如下图:
这时候预览,就能看到明显的时钟效果了,超过60秒,秒钟会归零,同时分钟加1。
你可以用类似的原理为分钟变量也做一下限制,超过60就归零,同时shizhong+1。不过也无所谓,很少有人看原型会看到时钟会变。
孩子们,赶紧试一下吧。