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

访客4年前黑客文章850

编辑导读:本文跟各人分享,如何用Axure实现数据大屏及时数字转动结果,作者从预览图,到所需原件,再到操纵步调都一一展开了阐明,并对进程中需要留意的问题举办了先容,但愿对你有所开导。

Axure教程:数据大屏设计之及时数字转动结果

在配置日常大屏设计事情中,我们会常常利用到数字转动结果,本日标记教各人几个简朴的数字转动结果。

演示结果:

Axure教程:数据大屏设计之及时数字转动结果

演示地点:

本教程通过3种 *** 实现上面的数字转动结果。

需要元件:

文本

中继器

动态面板

之一种:牢靠区间数字随机无限制增加

拉取一个文本元件,如图配置元件数值,这个数字为起始数字。

Axure教程:数据大屏设计之及时数字转动结果

配置元件载入交互,如下图:

1、配置期待时间为50毫秒。时间越短转动就越快。

2、配置载入时的文字:[[LVAR1+(Math.random()*10).toFixed(0)]]  

3、配置载入轮回触发事件这个很重要能不能轮回动起来就看它了。这边配置当前元件载入时就行。

4、生存元件交互预览看看。

Axure教程:数据大屏设计之及时数字转动结果

第二种:随机增加数字,配置更大值

拉取一个文本元件,如图配置元件数值,这个数字为起始数字。

1、配置判定数值小于10000时,数字加1。通过元件载入节制结果元件载入交互,如下图:

2、配置期待时间为50毫秒。时间越短转动就越快。

2、配置载入时的文字:[[This.text+1]]

3、配置载入轮回触发事件这个很重要能不能轮回动起来就看它了。这边配置当前元件载入时就行。

3、生存元件交互预览看看。

Axure教程:数据大屏设计之及时数字转动结果

第三种:利用中继器存放随机数字,做转动结果

拉取一其中继器元件,一个动态面板,一个文本元件,如图配置文本元件为0.00。

1、配置中继器字段,num,cs。cs为累计次数(数值越大显示转动时间越长),num为计较数值。如下图:

Axure教程:数据大屏设计之及时数字转动结果

2、配置中继器中的动态面板case1交互,如下图。

Axure教程:数据大屏设计之及时数字转动结果

Axure教程:数据大屏设计之及时数字转动结果

Axure教程:数据大屏设计之及时数字转动结果

配置中继器中的动态面板case2,如下图:

Axure教程:数据大屏设计之及时数字转动结果

配置中继器中的动态面板case3交互。如图:

Axure教程:数据大屏设计之及时数字转动结果

3、生存元件交互预览看看。

到这就做好三个差异的数字转动的结果了,通过本教程但愿对新手伴侣有所辅佐。感谢!

相关文章

视频中场:中视频的复兴与前路

视频中场:中视频的复兴与前路

编辑导语:在互联网浩瀚行业中,短视频行业如今无疑是最受用户接待的也是最火热的行业之一。尤其是在本年疫情之下,短视频用户激增,短视频迎来了其发作期。克日,在2020西瓜PLAY好奇心大会上,西瓜视频总裁...

优化Banner广告收入,离不开这7种策略!

优化Banner广告收入,离不开这7种策略!

编辑导语:Banner告白,是吸引用户的重要手段,在网站中凡是占据着不错的位置,它们的转化率对网站收益起到了至关重要的浸染。因此,我们往往会认为,Banner能迅速吸引用户的留意力,只要文案和视觉结果...

设计沉思录 | 中台产品服务升级之58微聊SDK

设计沉思录 | 中台产品服务升级之58微聊SDK

编辑导读:文章作者对主导的一其中台产物处事进级的进程举办了梳理总计,从项目标基本配景出发,到对方针举办拆解,复盘产物设计的逻辑推演进程,并对进级事后的版本举办了先容,与各人分享。 01 媒介 中台产...

互联网如何赋能“乡村振兴”?

互联网如何赋能“乡村振兴”?

编辑导读:近几年,跟着我国基本建树不绝完善,一些偏远农村也终于通网,与世界接洽上了。村子经济一直是我国经济的重要构成部门,互联网科技给村子经济带来了多种大概性。将来,互联网要如何给“村子振兴”赋能呢?...

外卖平台的骑手,是临时工,还是创业者?

外卖平台的骑手,是临时工,还是创业者?

编辑导读:《外卖骑手,困在系统里》一文让外卖骑手僻静台受到了各方存眷,激发了网友对外卖平台只追求效益掉臂骑手安详的接头。固然过后饿了么和美团都先后回应称会给骑手留5-10分钟的弹性时间,但平台算法的问...

产品分析报告:车企小程序,汽车行业新战场

产品分析报告:车企小程序,汽车行业新战场

导语:车企小措施在用户处事、车辆运营推广方面可以与app互为帮助。本文承接上一篇《汽车行业消费者APP产物阐明陈诉》,针对威马、领克、蔚来等车企小措施举办阐明。陈诉完成于2019年8月,涉及到的软件所...