数字跳动特效-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: ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
}

参数表格

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

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开发好像要退出历史舞台了一样，已经不再是当初新建几个文件，再引入，再优化引入文件请求的时代了。

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