动画:随机数字转换为文本

Question

我在一个随机的网站上看到了一个动画，但我没能复制它。动画就是这样。我已经尝试过在一些库中执行此操作，但仍然无法执行，如果有解决方案，我将不胜感激。

谢谢！

Answer 1

以下是您正在寻找的一个有点粗糙的版本：

const element = document.querySelector("#element");
const startTime = Date.now();
const duration = 2000;
const letters = element.dataset.text.split("");
const steps = letters.length;
const map = (n, x1, y1, x2, y2) => Math.min(Math.max(((n - x1) * (y2 - x2)) / (y1 - x1) + x2, x2), y2);
const random = (set) => set[Math.floor(Math.random() * set.length)];
let frame;
(function animate() {
frame = requestAnimationFrame(animate);
const step = Math.round(map(Date.now() - startTime, 0, duration, 0, steps));
element.innerText = letters
.map((s, i) => (step - 1 >= i ? letters[i] : random("0123456789")))
.join("");
if (step >= steps) {
cancelAnimationFrame(frame);
}
})();

<div id="element" data-text="After Effects"></div>