美文网首页原型工具
Axure RP9:数字加载效果

Axure RP9:数字加载效果

作者: shadow_2155 | 来源:发表于2021-02-05 16:07 被阅读0次

    一、实现效果

    数字加载

    二、实现步骤

      首先找到要实现加载效果的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:数字加载效果

        本文链接:https://www.haomeiwen.com/subject/vmfgtltx.html