Axure 案例：数值加载效果

今天要说到的数值加载效果，我们在使用App和网站的时候是经常见到的，尤其是金融类的产品、借贷类的产品等。

 

在我们打开某个页面，比如我的财富时，账户当中的金额会进行不断往上叠加，直到叠加到账户中的金额数值，就会停止。

 

 

具体效果，大家可以从这里看：https://hv8kwg.axshare.com

好，接下看看这个案例时怎么做的

 

用中继器和动态面板制作即可。

我们规定金额和累加次数，分别是中继器数据集中的两列数据。

动态面板加载时开启循环，通过结合判断来确定每次动态面板切换状态时是否进行累加或者停止累加。累加每次增加的数字为总额/累加次数，这样就比较均匀的累加。

 

上面是它的基本实现原理。根据这个原理我们一起来做一下。

 

 

一、创建中继器中元素

 

中继器中的元素是矩形-用以显示数值；动态面板-两个状态，用来切换面板状态。

 

 

 

 

二、创建中继器中数据

 

前面说了，只需两列。金额和叠加次数。但这里注意，把中继器的每项加载时的交互删除，在这里时没有用的。

 

 

 

三、设置动态面板进行自动循环切换状态

 

 

这里循环间隔的时间设置得稍微快些。这个时间时每两次数值叠加的时间差，如果需要慢些，把这个时间设置得大些即可，按需设置。

 

四、设置动态面板的切换面板状态时事件。这是重头戏。

 

先进行判断，一是金额进行叠加，这个条件是，当显示金额的矩形中的文本小于数据集中我们设定的金额时，会进行叠加。金额就是叠加结束后的金额加上每一次叠加的数值即可。

 

 

因为我的案例里边金额保留了两位数，所以为了保持两位数，这里使用了一个tofixed函数限制了小数点后的位数。同样这也是按需设置，如果你是整数的话，直接取整即可。

 

接下来的一种情况是，金额停止叠加。当展示的数值与总数值的差值小于单次叠加的数值时，说明已经不足以再进行叠加了，所以金额就不再往上叠加。

 

 

这里的条件大家还可以想一下，有没有其他的条件设置方法，留着给大家思考哈哈哈哈。动作就很简单了，让金额等于数据集中数据就行了。

 

最后，别忘记了，将动态面板的自动循环停止了。

 

 

大家设置好之后看看效果如何。动态面板的状态切换在数值切换的时候可以应用，比如电商网站常见的活动倒计时等，有兴趣的话大家可以尝试一下。