Javascript 在循环内对设置超时延迟应用easing

我在javascript循环中调用多个setTimeout。延迟当前设置为每次迭代增加200ms，使“self.turnpages（）”函数每200ms启动一次

然而，我想对这些可变延迟应用某种缓解措施，这样当循环开始到达最后几次迭代时，延迟会进一步分离，导致函数触发速度减慢

var self = this;    
var time = 0; 

for( var i = hide, len = diff; i < len; i++ ) {
                     (function(s){
                             setTimeout(function(){                    
                                        self.turnPages(s);                           
                             }, time);
                       })(i);                                  
             time = (time+200);
}

var self=this；
var时间=0；
for（var i=hide，len=diff；i

我完全不知道如何从这个开始

---

希望有人能帮忙。

这听起来像是罗伯特·彭纳的工作！您可以下载原始的ActionScript2.0版本（只需删除要移植到JavaScript的参数的强类型），并且对参数有很好的解释

类似于以下内容的操作将满足您的要求（）：

var-time=0；
var-diff=30；
var-minTime=0；
var maxTime=1000；
// http://upshots.org/actionscript/jsas-understanding-easing
/*
@t是吐温的当前时间（或位置）。这可以是秒或帧、步数、秒、毫秒等，只要单位与总时间相同[3]。
@b是属性的起始值。
@c是属性的起始值和目标值之间的更改。
@d是二者之间的总时间。
*/
函数easeInOutQuad（t、b、c、d）{
如果（（t/=d/2）<1）返回c/2*t*t+b；
返回-c/2*（（-t）*（t-2）-1）+b；
}
函数easeOutQuad（t、b、c、d）{
返回-c*（t/=d）*（t-2）+b；
}
函数easeInQuad（t、b、c、d）{
返回c*（t/=d）*t+b；
}
对于（var i=0，len=diff；i2019回答：：您不需要自己进行循环计时，也不需要处理单字符变量，只需要运行带有easing的函数。下面是一个使用来自npm的快速示例：


import ease from 'easy-ease';

ease({
  startValue: 1,
  endValue: 33,
  durationMs: 2000,
  onStep: function(value) {
    console.log(value)
  }
});

200不是常数，而是“i”的函数@Pointy-事实上，我不知道从哪里开始计算，以达到我的要求。我想这取决于你希望缓和曲线看起来像什么。一个简单的Easeinoutquadperfect@nnnnnn“隐藏”是起始点，即当前页面，“差异”是我们要转到的页面。我正在为页面打开设置动画canvas元素，并希望能够从任何页面切换到另一页面，同时为其间所有页面的页面翻转设置动画。绝对完美。谢谢你，没问题，gordyr，轻松愉快！值得一提。要补充的是，此库的性能非常纯净。如果你有20多个元素要使用“开始0，结束100”进行渲染，请确保此库每秒只有几帧。@kris_iv你是说“纯”还是“差”？好的。是的，如果你要制作20个元素的动画，我会使用CSS而不是JS。但是动画中的旁白还有很多其他用途。

import ease from 'easy-ease';

ease({
  startValue: 1,
  endValue: 33,
  durationMs: 2000,
  onStep: function(value) {
    console.log(value)
  }
});