【原创Axure教程4】用Axure做复杂有趣的交互动效——实例4：数字跳动动画
这一次的教程，其实是上一篇教程的后续，上一篇教程留下了一个尚未完成的效果即数字跳动效果。
地址：https://pan.baidu.com/s/1bqmWaE7】
这一次的教程，其实是上一篇教程的后续，上一篇教程留下了一个尚未完成的效果即数字跳动效果。这次我们使用
技术点主要有以下几个：
（1）如何利用变量和表达式实现数字+1的跳动效果；
（2）利用空动态面板做触发器和重复move动作实现循环；
（3）利用条件condition来实现单位数和双位数数字跳动；
我们先来看一下完成后的效果：
清晰版视频与教程中所用的素材，以及Axure工程源文件都在附件中提供下载。
接下来是正文开始~~
————————————————————分割线—————————————————————
【Step1】
接着打开上篇教程的工程文件，双击进入“dymp_总容器”。
我们先来理清下制作的思路：
（1）首先需要建立一个全局变量，用来存储不停变化跳动的数字；
（2）然后让用“Set Text”（“设置文字”动作）来定义字符串的内容，文字内容 = 刚建立的全局变量
（3）建立一个空动态面板充当触发器，使用move - Set Variable - move的action组，形成一个循环，从而不断设置文字为新的内容；
OK，那么让我们按照这个思路开始把！
————————————————————分割线—————————————————————
【Step2】建立全局变量“time”
（1）建立一个全局变量。点击“Project — Global Variable” ，如下图1：
图1：
（2）在弹出的弹窗里，点击左上角的绿色+图标，新建一个全局变量，命名为“time”，如下图2，
图2：
————————————————————分割线—————————————————————
【Step3】创建触发器
（1）建立一个空的动态面板充当触发器。拖动一个动态面板部件到页面上，重命名为“dymp触发器”，最好不要影响画面内容。如下图3所示：
图3：
（2）我们需要在点击播放暂停按钮的时候，触发数字开始跳动，所以，在部件“dymp_播放暂停icon”的 OnClick事件上最后添加一个move动作，移动一下刚建立的触发器动态面板部件“dymp触发器”，如下图4所示：
图4：
（3）我们需要为其在OnMove事件上添加动作，即当dymp触发器被移动时，触发相应的设置变量与数字跳动的动作，而上一步我们在部件“dymp_播放暂停icon”上添加的move“dymp触发器”部件的动作，即是为了此时触发设置变量与数字跳动的动作。
点击选择刚才创建的“dymp触发器”部件，会发现OnMove事件不在当前列中，点击“More Events”在下拉弹窗中点击选择“OnMove”事件，如图5所示：
图5：
（4）双击OnMove，弹出窗口中，在左侧选择“Set Variable Value”动作，然后在右侧选择刚创建的全局变量time，点击右下角“fx”图标，踏出表达式编辑弹窗编辑变量值，如下图6所示：
图6：
（5）点击上方蓝色下划字“Insert Variable or Fuction” 在弹出的下拉框里选择刚创建的全局变量time，如下图7所示：
图7：
之后可看到编辑输入框里出现“[[time]]”表达式字样，如下图8所示：
图8：
（6）修改表达式为“[[time+1]]”，意即在原来基础上+1，这样，如果我们后面持续不断触发此OnMove事件的动作，那么就能让time变量值不断地在上一次基础上加1，从而形成time值不断累积+1的效果。如下图9所示：
图9：
（7）那么如何形成循环不断+1呢？很简单，在之后再添加一个move动作再次移动一下“dymp触发器”，这样，就可以每次设置变量值之后，就移动一下，然后又触发OnMove事件，再次设置一次变量值。如下图10所示：
图10：
————————————————————分割线—————————————————————
【Step4】将变量值赋予播放进度数字
（1）在move动作前，Set Variable Value动作之后，即两个动作之间添加一个Set Text动作，在右侧选择“歌曲进度-数字跳动”，如下图11所示：
图11：
（2）点击右下角“fx”弹出表达式编辑弹窗，并点击点击上方蓝色下划字“Insert Variable or Fuction” 在弹出的下拉框里选择刚创建的全局变量time，如下图12所示：
图12：
（3）到此我们便实现了跳动数字的效果，但是有一个问题：变化太快了。我们需要让数字变化的频率降低，每次变量值+1后，等待一段时长。具体做法是：在刚添加的Set Text动作之后，再添加一个Wait动作，设置Wait时长为600毫秒，即每次变量值变化+1，相隔600毫秒。这个值可以由大家随自己自由设置。如下图13所示：
图13：
————————————————————分割线—————————————————————
【Step5】
OK，到此为止，我们已经初步成功地制作了数字跳动动画。可以运行一下测试看看效果，如果觉得600毫秒间隔还是太快，可以修改成800、1000毫秒等看看效果。
但是，还是有一个问题：如果数字超过9变成两位数，那就出现了穿帮的bug，进度数字变成了“00：012”这样的，如下图14所示：
图14：
如何解决这个问题呢？笔者用的是一个比较简单的“笨办法”，大家可回去想想有木有更简单的~
（1）为OnMove事件添加一个条件。双击OnMove事件的case1弹出编辑弹窗，重新命名case为“Case 1_小于10”，点击右侧“Add Condition”按钮，进行条件的编辑。如下图15所示：
图15：
（2）第一个下拉选择框选择“value of variable”，如下图16所示：
图16：
（3）第二个选择框，选择全局变量time，如下图17所示：
图17：
（4）第三个下拉选择框，选择“is less than”，意为变量time的值“小于….”，如下图18所示：
图18：
（5）第四个下拉选择框，选择“value”，然后右边的输入框内设置值为9，即小9。如下图19所示：
图19：
OK，到此为止，条件已经设置完毕，即触发OnMove事件的“Case 1_小于10”有一个前置条件：当变量值time小于9的时候。所以，当变量值超过达到9，就不会再继续变大了。我们可以运行测试预览一下效果。
————————————————————分割线—————————————————————
【Step6】
（1）接下来，我们要解决当变量值大于9变成两位数的时候的问题。
复制“Case 1_小于10”（可以直接ctrl+c然后ctrl+v），重新命名为“Case 2_大于10”，并编辑条件修改为“当变量值time大于等于9的时候”，设置如下图20所示：
图20：
（2）当变成两位数的时候，之前放在前面的字符串部件“歌曲进度other”（即那个前面不会跳动的“00:0”），需要改变成“00：”，所以，我们在这个case的最上面，要添加一个新的Set Text动作，设置字符串部件“歌曲进度other”的文字内容。如下图21所示：
图21：
那么相应的，在小于10时候的“Case 1_小于10”最上面，也要添加一个设置文字的动作，设置“歌曲进度other”内容为“00:0”。如下图22所示：
图22：
（3）新的问题又来了，当大于10的时候，由于部件“歌曲进度other”内容少了一个0，所以在字符串部件“歌曲进度-数字跳动”变成两位数的时候，中间有一个字符串大小的空格，所以我们需要在time大于等于10变成两位数的时候，把字符串部件“歌曲进度-数字跳动”往前移动大约一个字符串的距离，这里可以用move动作，但是不要设置时长，即让移动在瞬间完成，具体设置如下图23所示：
图23：
相应的，在在小于10时候的“Case 1_小于10”中，也添加一个move动作，即在time小于10为个位数的时候将“歌曲进度-数字跳动”位置固定在正确位置，设置如下图24所示：
图24
OK，相信到此，大家应该也自己会做当time大于60，即超过一分钟的时候，如何制作相应效果了吧？
这里就不再赘述，大家可以回去自己练习一下哈！
“X=X+1”是一个非常常用的变量+1的表达式，在很多软件都会用到。可能在Axure中还有别的数字跳动效果实现方法等待我们去发掘吧！
