S07-06 数据可视化-大屏适配-API

• API-countup.js
  • 索引
  • countup.js
    • new CountUp()
    • start()
    • pauseResume()
    • reset()
    • update()

[TOC]

API-countup.js

索引

• new CountUp：(target, endVal, options?)，用于创建平滑数字计数动画的实例。
• countUpInstance.start()：()，用于启动计数动画，让数字从起始值平滑地增长到目标值。
• countUpInstance.pauseResume()：()，用于控制计数动画暂停和恢复的方法。
• countUpInstance.reset()：()，用于重置计数器到初始值，并停止当前的计数动画。
• countUpInstance.update()：(newValue)，用于更新已经启动的计数器的目标值并重新开始动画。

countup.js

new CountUp()

new CountUp()：(target, endVal, options?)，用于创建平滑数字计数动画的实例。

• target：id | DOM ，目标DOM元素的ID或元素本身，计数值将显示在这个元素中。

• endVal：number，计数动画的结束值，即目标数字。

• options?：{}，配置选项，用于控制动画的行为。

  • startVal?：number，默认：0，起始值。
  • duration?：number，默认：2，动画持续时间，单位：秒。
  • decimalPlaces?：number，默认：0，小数点后显示位数。
  • decimal?：string，默认：.，小数点分割符。
  • useEasing?：boolean，默认：true，是否使用缓动动画。
  • useGrouping?：boolean，默认：true，是否使用千位分隔符。
  • separator?：string，默认：,，千位分割符。
  • prefix?：string，数字前缀。
  • suffix?：string，数字后缀。
  • onStartCallback?：() => any，动画开始时调用的回调函数。
  • onCompleteCallback?：() => any，动画完成时调用的回调函数。

• 返回：

• countUpInstance：CountUp，返回一个CountUp实例，用于调用实例方法。

• // 创建 CountUp 实例
  var countUp = new CountUp('count-up', 1000);

start()

countUpInstance.start()：()，用于启动计数动画，让数字从起始值平滑地增长到目标值。

• // 启动计数动画
  countUp.start();

pauseResume()

countUpInstance.pauseResume()：()，用于控制计数动画暂停和恢复的方法。

• // 为按钮添加点击事件，控制动画暂停/恢复
  document.getElementById('toggle').addEventListener('click', function() {
    countUp.pauseResume(); // 如果动画在运行，则暂停；如果已经暂停，则恢复
  });

reset()

countUpInstance.reset()：()，用于重置计数器到初始值，并停止当前的计数动画。

• // 为重置按钮添加点击事件
  document.getElementById('reset').addEventListener('click', function() {
    countUp.reset();  // 重置计数器到初始值，并停止动画
  });

update()

countUpInstance.update()：(newValue)，用于更新已经启动的计数器的目标值并重新开始动画。

• newValue：string | number，新的目标值。

• // 为 "更新目标值" 按钮添加点击事件
  document.getElementById('update').addEventListener('click', function() {
    var newTarget = Math.floor(Math.random() * 2000) + 1000; // 随机生成一个新的目标值
    countUp.update(newTarget);  // 更新计数器的目标值
  });