重庆 网站 建设 公司龙胜做网站的公司

今天和大家教大家制作数字滚动效果的原型模板，效果包括：

• 在输入框输入目标数值后，点击滚动按钮，下方数字自动滚动到对应的数值；

• 在输入框输入初始数值后，点击设置初始值按钮，可以设置下方数字滚动前的默认值；

  具体效果可以打开下方原型地址体验或者点击下方视频观看

【原型预览含下载地址】

https://axhub.im/ax9/14308caa8d2f07ce/#g=1&p=数字滚动

【制作教程】

1、材料准备

1.1 提示弹窗

用矩形和图标制作，里面填写默认提示文字，如果需要再屏幕指定位置，例如中部显示，可以将他转为动态面板，默认隐藏，后续通过交互显示。

1.2 输入控制组

包括主要包括输入框和按钮，左侧输入框是控制初始数字的，右侧输入框控制目标数字，就是数字滚动到达终点的值。

1.3 数字牌

用矩形制作0-9的数字，分别放在动态面板的状态0-9页里面，后续我们会通过设置动态面板状态时，添加滑动的动画来实现的，需要制作几位数的，复制几个这样的数字动态面板，案例中是六位数，依次备注个 、十、百、千、万、十万，如下图所示摆放

1.4 逻辑组

我们需要一些文本标签用于处理逻辑，我们默认增加7个文本标签，分别对应默认数字、个位、十位、百位、千位、万位和十万位，默认隐藏即可。

2、交互制作

鼠标单击开始滚动按钮时，首先我们要对输入的目标数字进行判断，例如判断输入的内容是否为数字、输入的位数是否超出6位，如果不符合条件，那我们就用显示的交互显示提示弹窗，显示后可以设置几秒后隐藏。

如果符合条件，我们进行下一步的判断，需要判断默认文字，就是初始值，哪一个更大，这里取决于他数字往上滚动，还是往下滚动。按照惯例，如果目标数字比初始数字大，那数字应该是往上滚动；如果目标数字比初始数字小，那数字应该是向下滚动，如果目标数字和初始数字一样，那就不需要执行交互。

我们以往上滚动为例子，即目标数字大于初始数字，首先我们要判断，个位数的数字，如果数字不等于9，因为如果等于9，滚动1位就变成0，要进一位，我们先讨论数字不等于9的情况，这里我们用设置文本的交互，将记录个位数的文本标签的值，在原来的基础上+1，然后设置默认数字文本标签的值为新的值即个位、十位、百位、千位、万位和十万位合并起来，接着设置面板状态到达个位数字对应的页面。

如果数字等于9，那我们就将个位的数字设置成0，接着设置面板状态到达个位数字对应的页面。这里处理完个位之后，我们就要处理十位，因为十位进了一位，相当于要+1，处理十位的方法和处理个位的是一样的，首先也是判断他数字是否等于9，如果不等于，就用设置文字的交互，设置十位数+1，这字默认文字为最新值，设置面板状态到达个位数字对应的页面；等于9，就设置十位数为0，这字默认文字为最新值，设置面板状态到达个位数字对应的页面，然后对百位进行加1，后面的百位、千位、万位和十万位也是同样的思路来完成。这里十位、百位、千位、万位和十万位的动画时间可以比个位的长一点。

加一位之后，我们要写一个循环，判断默认文字是否等于目标文字，如果不等于，继续上面从个位开始+1，直到两者之间的值相等。这里我们用等待的交互，等待动画结束，然后再用触发事件，触发前面的判断事件即可。

这样往上滚动就完成了，向下滚动也是一样的，就是目标数字小于默认数字那种情况，这里相当于数字要减一，交互和逻辑和上面都一样，只不过把原来的加一变成减一，将动态面板向下滑动，变成向上滚动，还有判断进一位的条件是等于9，变成退一位的条件是等于0，其他都是一样的，大家复制粘贴改一下就可以了。

上面就完成了数字滚动到目标数字的效果了，但是是基于初始值为0的情况，那接下来我们学习怎么设置初始值。

点击设置初始值按钮的时候，首先我们要对输入的数字进行判断，例如判断输入的内容是否为数字、输入的位数是否超出指定位数，如果不符合条件，那我们就用显示的交互显示提示弹窗，显示后可以设置几秒后隐藏。

然后我们再将输入框的文本设置到默认数字里，这里为了载入时就可以触发一次，所以我么可以把这个交互写在输入框载入时。

然后我们要把值分别设置到个位、十位、百位、千位、万位、十万位的文本标签里，这里需要根据默认文本的位数来设置，例如6位数123456，个位、十位、百位、千位、万位、十万位对应的就是数字6、5、4、3、2、1，那如果是5位数的12345，这里十万位对应的是数字0，个位、十位、百位、千位、万位对应的数字是5、4、1。所以我们就需要分情况来设置，我们可以利用length函数获取文本长度，然后用slice函数进行提取

后面的4位数、3位数、两位数和一位数都是这个原理。

最后设置各个动态面板的页面为对应的个位、十位、百位、千位、万位、十万位的文本标签的值就可以了。这里以个位为例，我们可以写在个位文本标签载入时，这样载入的开始，就可以设置到对应的面板状态里显示对应的数字，后面设置新的初始值时，只需要触发一下这个交互就可以了。

十位、百位、千位、万位、十万位也是同样的原来，交互复制一下就可以了。

这样我们就完成数字滚动效果的原型模板了，后续使用也很方便，默认的初始值和最终的目标值只需要输入框里填写，预览后点击滚动按钮即可自动生成对应的效果。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。