Axure RP9:数字加载效果

一、实现效果

数字加载

二、实现步骤

  首先找到要实现加载效果的Text,之后添加交互,如下图:

交互截图
  1. LOADED:Text加载时触发的交互事件。
  2. if 条件:判断如果当Text值小于“12345”时才执行后续的动作。
  3. Wait:停留100毫秒的时间。
  4. Set Text:设置Text的值(每次增加后的值)。
  5. Fire Event:再次触发Text的LOADED交互事件。

  以上5个步,形成一个循环,如果Text的值小于12345时,每隔100毫秒会一直执行下去,直到Text的值大于12345时,才会跳出循环。
  每个100毫秒增加的数值,可以是随机数,也可以是固定的数,用随机数效果会更好一些,公式如下图:


Set Text

复制公式:[[this.text+(Math.random()*1000).toFixed(0)]]
Math.random():会生成一个随机数。乘以1000是让这个加数变得更大一些,要不然要等很久才会大于12345。
toFixed(0):表示保留0为小数,也就是去掉小数。因为通过Math.random()生成的随机数是带有很多位小数的,所以需要去掉小数,保留为整数。

  ok,数字加载效果搞定了!

你可能感兴趣的:(Axure RP9:数字加载效果)