数字跳动特效-countUp插件用法

逛高斯键盘官网的时候，应该是去年的时候，官网改版后有一个特效挺有意思的，就是数字跳动，之前一直没空研究，今天抽空去看了下，js有一个开源的插件：countUp.js

先看看高斯的效果图：

效果就是这样，我们先去下载js文件

CountUp.js

下载完我们找到dist目录下的countUp.min.js文件，拿出来在你需要的项目中。

再新建一个js文件，名称自定义，这里是用于调用countUp的，你可以命名为：start.counUp.js

教程

注意，使用该功能你需要一个服务器环境，本地直接打开是不行的!

引用

由于版本更新后，采用了es6的模块写法，引入js文件的时候需要注意不能使用传统的type属性了。

<script type="module" src="js/countUp.min.js"></script>
<script type="module" src="js/start.counUp.js"></script>

type="module"，要改为该值才行，不然会报错。

打开start.counUp.js文件

写入：

import { CountUp } from './countUp.min.js';

window.onload = function () {
  var countUp = new CountUp('myElementId', 2000);
  if (!countUp.error) {
    countUp.start();
  } else {
    console.error(countUp.error);
  }
}

注意这里的import后面的路径是相对于start.counUp.js文件而言的，如果你CountUp.js文件和start.counUp.js放在一起，就可以如上所写，不然就需要改为正确的路径，关于路径怎么设置，懂点css就知道了吧，不会就百度。

如果script写在body最底下，那么window.onload就也不需要了。

import { CountUp } from './countUp.min.js';

var countUp = new CountUp('myElementId', 2000);
if (!countUp.error) {
  countUp.start();
} else {
  console.error(countUp.error);
}

这样保存后，基本效果就有了。

参数

new出CountUp构造函数后，可以传入参数，而第一个参数为元素的id，第二个为跳动的end值，第三个为{}对象，我没设置详细参数，就没写，这里简单说一下第三个参数有哪些参数可以设置。

js

{
  startVal: 20,
  decimalPlaces: 2,
  duration: 5,
  useGrouping: true,
  useEasing: true,
  smartEasingThreshold: 500,
  smartEasingAmount: 300,
  separator: ',',
  decimal: '.',
  prefix: '￥',
  suffix: '元',
  numerals: ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
}

---

参数表格

key	value	说明
startVal	number	跳动起始数字
decimalPlaces	number	小数位，整数自动添.00
duration	number	动画持续时间
useGrouping	boolean	是否开启逗号，默认true（1,000）false（1000）
useEasing	boolean	动画缓动效果（ease),默认true
smartEasingThreshold	number	大于这个数值的值开启平滑缓动
smartEasingAmount	number	amount to be eased for numbers above threshold (333)
separator	string	分割用的符号
decimal	string	小数分割符合
prefix	sttring	数字开头添加固定字符
suffix	sttring	数字末尾添加固定字符
numerals	Array	替换从0到9对应的字，也就是自定数字字符了,数组存储

还有两个是动画的参数，看不懂，有兴趣的可以自己翻译看看

easingFn: (t: number, b: number, c: number, d: number) => number,
  formattingFn: (n: number) => string; // this function formats result

我们可以将配置好的{}用一个变量保存，然后传入即可。

import { CountUp } from './countUp.min.js';

let options = {
  startVal: 20,
  decimalPlaces: 2,
  duration: 5,
  useGrouping: true,
  useEasing: true,
  smartEasingThreshold: 500,
  smartEasingAmount: 300,
  separator: ',',
  decimal: '.',
  prefix: '￥',
  suffix: '元',
  numerals: ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
}

var countUp = new CountUp('myElementId', 2000,options );
if (!countUp.error) {
  countUp.start();
} else {
  console.error(countUp.error);
}

方法

需要注意的是，现在插件已经不会自动绑定scroll事件了，也就是说，数字跳动触发是需要自己手动的，这也方便我们自定义了，不会被预定义的方法搞得手忙脚乱。

启动

countUp.start();

并且还支持回调函数

countUp.start(callback);

function callback(){
  //回调函数
}

暂停或者恢复

countUp.pauseResume();

如果在运行状态触发该方法则暂定，暂定状态再触发则恢复。

重置

countUp.reset();

动画重新开始

更新最终值

countUp.update(989);

使用该方法，我们甚至可以做到及时响应，比如对页面的访问次数啊，用户浏览量增加啊，都可以做到不刷新页面进行更新实时内容。

---

以上就是关于改插件的用法了，改插件还支持vue那些，因为使用了组件形式，对于部署单页应用，大型项目都很方便。

从这里，我慢慢的感觉，传统的web开发好像要退出历史舞台了一样，已经不再是当初新建几个文件，再引入，再优化引入文件请求的时代了。

有好有坏吧，好是开发会越来越便捷，坏的就是学习成本更高了。总之，加油吧！