更新于

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

发布于 / 分类: JavaScript / 暂无评论 / 阅读量: 118

逛高斯键盘官网的时候,应该是去年的时候,官网改版后有一个特效挺有意思的,就是数字跳动,之前一直没空研究,今天抽空去看了下,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: ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
}

参数表格

keyvalue说明
startValnumber跳动起始数字
decimalPlacesnumber小数位,整数自动添.00
durationnumber动画持续时间
useGroupingboolean是否开启逗号,默认true(1,000)false(1000)
useEasingboolean动画缓动效果(ease),默认true
smartEasingThresholdnumber大于这个数值的值开启平滑缓动
smartEasingAmountnumberamount to be eased for numbers above threshold (333)
separatorstring分割用的符号
decimalstring小数分割符合
prefixsttring数字开头添加固定字符
suffixsttring数字末尾添加固定字符
numeralsArray替换从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开发好像要退出历史舞台了一样,已经不再是当初新建几个文件,再引入,再优化引入文件请求的时代了。

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有550条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局