如何用Axure RP 8.0 制作类似时间60秒、10秒等倒计时效果
2017-09-13 10:46
726 查看
在原型设计的时候经常会用到时间倒时计,比如点击获取验证码后等待的60秒、120秒,或者页面等待10秒跳转到下一个页面等,这都属于倒计时的范畴,这里把用Axure成功制作倒计时的功能给大家分享一下。以在页面上倒计时10秒进入下一个页面为例:
1.拖出来两个文本标签,一个在里面写入数字10,并命名为time,另一个写入文字“秒后自动进入下个页面”
2.拖出来一个动态面板,命名为round,双击动态面板,里面已经有一个动态面板State1,再添加一个State2,分别设置两个面板的背景色为红和蓝,用于演示效果,点击确定
3.双击动态面板round的"状态改变时"事件,在弹出的窗口中点击“添加条件”,设置“元件文字”time
> 值 0,然后点击确定
4.紧接着在添加动作列中点击“设置文本”,在右边配置动作中勾选time元件,然后点击右下角的fx,添加局部变量LVAR1=元件文字time,然后再插入变量[[LVAR1]],然后修改为[[LVAR1-1]],然后点击确定
5.点击index页面空白处,双击“页面截入时”事件,在弹出框中添加动作"设置面板状态“,在右边勾选round动态面板,选择状态”Next”,勾上“向后循环”,“循环间隔1000毫秒”及“首个状态延时1000毫秒后切换”,然后点击确定
6.点击动态面板,再次点击”状态改变时“事件,添加页面跳转,添加条件,当time值=0时,跳转到page1
7.好了,点击预览,即可看到效果了,真正使用的时候,可以把动态面板round隐藏即可。
方法/步骤
1.拖出来两个文本标签,一个在里面写入数字10,并命名为time,另一个写入文字“秒后自动进入下个页面”2.拖出来一个动态面板,命名为round,双击动态面板,里面已经有一个动态面板State1,再添加一个State2,分别设置两个面板的背景色为红和蓝,用于演示效果,点击确定
3.双击动态面板round的"状态改变时"事件,在弹出的窗口中点击“添加条件”,设置“元件文字”time
> 值 0,然后点击确定
4.紧接着在添加动作列中点击“设置文本”,在右边配置动作中勾选time元件,然后点击右下角的fx,添加局部变量LVAR1=元件文字time,然后再插入变量[[LVAR1]],然后修改为[[LVAR1-1]],然后点击确定
5.点击index页面空白处,双击“页面截入时”事件,在弹出框中添加动作"设置面板状态“,在右边勾选round动态面板,选择状态”Next”,勾上“向后循环”,“循环间隔1000毫秒”及“首个状态延时1000毫秒后切换”,然后点击确定
6.点击动态面板,再次点击”状态改变时“事件,添加页面跳转,添加条件,当time值=0时,跳转到page1
7.好了,点击预览,即可看到效果了,真正使用的时候,可以把动态面板round隐藏即可。
相关文章推荐
- CorelDRAW如何制作类似PS中的阈值效果
- 如何制作类似msn(QQ)等网页中的拖动效果(二)
- 如何制作类似msn(QQ)等网页中的拖动效果(二)
- 如何制作类似msn(QQ)等网页中的拖动效果
- 如何制作类似msn(QQ)等网页中的拖动效果(一)
- EDIUS中的3D图层效果该如何制作
- ArcGIS实用制图技巧——如何制作“浮雕”效果的多边形
- PS 如何制作Vista的毛玻璃效果
- 利用jQuery制作类似skype的按钮效果
- Android中如何使用ViewPager实现类似laucher左右拖动效果
- 如何使用InstallShield8.0制作自己的安装程序
- .net如何实现10秒倒计时
- .net中如何制作类似图表控件
- 如何在EDIUS中制作闪白和闪黑效果?
- 如何在 BCB 中制作模仿超级链接效果
- 博主教你制作类似9patch效果的iOS图片拉伸
- 博主教你制作类似9patch效果的iOS图片拉伸
- 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4
- 如何使用InstallShield8.0制作自己的安装程序
- js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟