数字滚动效果组件开发实战

2023-09-28 06:42:07

如何实现数字滚动效果？

毫无疑问，数字滚动效果是前端开发中常见的动画效果之一，它通常用于显示数字值的变化，例如倒计时、计数器、仪表盘等场景。实现数字滚动效果有多种方法，但最常见和最简单的方法是使用CSS动画。

CSS实现

利用CSS的animation属性和keyframes，可以轻松创建出数字滚动效果。

步骤1：创建HTML结构

首先，需要创建一个HTML元素来显示数字值，然后将其放在需要滚动的位置。例如：

<div class="number-wrapper">
  <div class="number">0</div>
</div>

步骤2：添加CSS样式

接下来，需要为数字添加CSS样式，以设置数字的样式和位置。同时，需要添加动画样式，以实现数字滚动效果。例如：

.number-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-align: center;
}

.number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
}

@keyframes roll {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) scale(2);
  }
}

.number-wrapper.rolling .number {
  animation: roll 1s infinite alternate;
}

步骤3：触发动画

最后，需要使用JavaScript来触发数字滚动效果。例如：

var numberWrapper = document.querySelector('.number-wrapper');

// 触发动画
numberWrapper.classList.add('rolling');

// 停止动画
numberWrapper.classList.remove('rolling');

Vanilla JavaScript实现

除了使用CSS动画，也可以使用Vanilla JavaScript来实现数字滚动效果。

步骤1：创建HTML结构

与CSS实现相同，首先需要创建一个HTML元素来显示数字值，然后将其放在需要滚动的位置。

步骤2：添加JavaScript代码

接下来，需要添加JavaScript代码来实现数字滚动效果。例如：

var numberElement = document.querySelector('.number');

// 数字滚动的目标值
var targetValue = 100;

// 滚动的速度
var speed = 10;

// 当前的数字值
var currentValue = 0;

// 更新数字值
function updateNumber() {
  // 计算数字差值
  var diff = targetValue - currentValue;

  // 更新当前数字值
  currentValue += diff / speed;

  // 设置数字元素的文本内容
  numberElement.textContent = Math.floor(currentValue);

  // 如果当前数字值已经达到目标值，则停止滚动
  if (currentValue >= targetValue) {
    clearInterval(intervalId);
  }
}

// 启动数字滚动
var intervalId = setInterval(updateNumber, 10);