按顺序替换文本框动画中的字符

Sequentially replace characters in textbox animation

本文关键字：字符 动画 顺序 替换 文本      更新时间：2023-09-26

我已经成功地遍历了文本框中的一长串字符，并将它们依次替换为从数组中随机选择的值。

我的问题是得到正确的时间。我希望能够在X秒内完成动画，不管字符串的长度，也就是说，如果动画需要2秒，它应该需要2秒，不管字符串是10个字符长还是300个字符长。我想我的数学可能出了问题，因为完成动画需要的时间远远超过2秒。

用我的小提琴可能更容易解释。

>小提琴

我的循环看起来像这样:

var totalSeconds = 1000;
var stringLen = 100
setInterval(function(){
 ...
}, totalSeconds/(stringLen*1000));

除了时间问题，是否有比我现有的更好的方法和/或是否有一个库可以用来实现相同的结果?

我看到http://jschr.github.io/textillate/，但不知道如何实现字符替换到它。

不要依赖setInterval因为https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval (

)

"delay是setInterval()函数在每次调用func之前应该等待的毫秒数(千分之一秒)。与setTimeout一样，有最小延迟强制执行。

相反，您可能需要一个循环来检测每次迭代之间经过了多少时间。

var interval = totalSeconds*1000/(stringLen)
var totalCount = 0;
var prev = new Date().getTime();
while(totalCount < stringLen) {
  var current = new Date().getTime();
  var passed = current - prev;
  prev = current;
 // passed is how much time has passed between intervals
 var count = passed / interval;
  for (var i =0; i< count; i++) {
    // change letter here...
  }
  totalCount += count;
  // Carry over remainder
  prev -= passed % interval;
}

这是未经测试的:)

相关文章：