1. 主页 > 设计资讯 > 热门新闻

Axure教程:数据大屏幕设计的实时数字滚动效果

编辑指南:本文将与您分享如何使用Axure在数据大屏幕上实现实时数字滚动效果。笔者对预习、所需原创、操作步骤逐一进行分析,并介绍过程中需要注意的问题,希望对你有所启发。

在设置日常大屏幕设计工作中,我们经常使用数字滚动效果。今天,符号教你几种简单的数字滚动效果。

示范效果:

Axure教程:数据大屏幕设计的实时数字滚动效果(图1)

演示地址:https://www.axurebi.com/softs/号码/

本教程通过三种方式实现上述数字滚动效果。

所需组件:

文本中继器动态面板

第一种类型:固定间隔的数量随机增加,没有限制

拉一个文本元素,如图,设置元素值,这是起始数字。

Axure教程:数据大屏幕设计的实时数字滚动效果(图2)

设置组件加载交互,如下图所示:

1.将等待时间设置为50毫秒。时间越短,滚动越快。

2.加载时设置文本:[[lvar1+(数学。random () * 10)。tofixed (0)]]

3.设置负载循环触发事件非常重要。看周期能不能动了。加载当前组件时在此设置。

4.保存组件的交互式预览。

Axure教程:数据大屏幕设计的实时数字滚动效果(图3)

第二:随机增加数量,设置最大值

拉一个文本元素,如图,设置元素值,这是起始数字。

1、设定的判断值小于10000,该数加1。通过组件加载控制效果组件加载交互,如下图所示:

2.将等待时间设置为50毫秒。时间越短,滚动越快。

2.加载时设置文本:[[This.text+1]]

3.设置负载循环触发事件非常重要。看周期能不能动了。加载当前组件时在此设置。

3.保存组件的交互式预览。

Axure教程:数据大屏幕设计的实时数字滚动效果(图4)

第三种:用中继器存储随机数,做滚动效果

拉出一个中继器元素、一个动态面板和一个文本元素,如图所示,将文本元素设置为0.00。

1.设置中继器字段,num和cs。Cs为累计数(数值越大,滚动时间越长),num为计算值。如下图:

Axure教程:数据大屏幕设计的实时数字滚动效果(图5)

2.在中继器中设置动态面板case1交互,如下图所示。

Axure教程:数据大屏幕设计的实时数字滚动效果(图6)

Axure教程:数据大屏幕设计的实时数字滚动效果(图7)

Axure教程:数据大屏幕设计的实时数字滚动效果(图8)

在中继器中设置动态面板盒2,如下图所示:

Axure教程:数据大屏幕设计的实时数字滚动效果(图9)

在中继器中设置动态面板case3交互。如图:

Axure教程:数据大屏幕设计的实时数字滚动效果(图10)

3.保存组件的交互式预览。

在这里,我们做好了三个不同数字的滚动,希望通过这个教程帮助新手朋友。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://www.yangyangzhi.cn/xingyezixun/sjwz/548.html

联系我们

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

微信号:ffjianzhan@qq.com

工作日:9:30-18:30,节假日休息