动画：随机数转换为文本 [关闭]答案

【问题标题】：Animation: random number transition to text [closed]动画：随机数转换为文本 [关闭]
【发布时间】：2020-07-15 11:24:01
【问题描述】：

我在一个随机网站上看到了一个动画，但我无法复制它。动画是this。我已经尝试使用一些库来做这件事，但仍然无法做到，如果有解决方案，我将不胜感激。

谢谢！

【问题讨论】：

欢迎来到 Stackoverflow。您还需要发布到目前为止您尝试过的内容。

标签： javascript html css web animation

【解决方案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);
  }
})();

&lt;div id="element" data-text="After Effects"&gt;&lt;/div&gt;

【讨论】：