Javascript 将放松融入基于时间的行动中

我的目标是在我的项目中将放松融入基于时间的移动，可能需要一些帮助

目前我使用的是每秒x像素的简单公式

...
speed: 100,
now: undefined,
delta: undefined,
then: undefined,
setDelta: function() {
    this.now = Date.now();
    this.delta = (this.now - this.then) / 1000;
    this.then = this.now;
},
...

var slice = this.speed * this.delta;
this.x += Math.cos(rad) * slice;
this.y += Math.sin(rad) * slice;

通过这样做，我的对象以每秒100像素的速度移动。 然而，动画非常枯燥，因此可以通过使动画开始缓慢，加速到距离的一半，然后再次开始减速，直到到达目的地，从而使动画更有趣

我找到了这个javascript的函数列表

我认为似乎准确的是一些平滑正弦，比如：

easeInOutSin: function (t) {
    return (1 + Math.sin(Math.PI * t - Math.PI / 2)) / 2;
}

但问题是，我不知道如何将这个公式连接到上面给出的代码

在链接上，这些家伙声称t是从0到1的参数，我想可能需要改变的是速度。也许有人可以帮忙

这是一个用于实验的演示片段：

设距离=p=>Math.sqrtp.x-p.dx*p.x-p.dx+p.y-p.dy*p.y-p.dy， rftv=p=>Math.atan2p.dy-p.y，p.dx-p.x； 让cvs=document.createElement'canvas'， ctx=cvs.getContext'2d'， w=cvs.width=700， h=cvs.height=200， cx=w/2， cy=h/2； 设obj={ x:100， y:cy， 速度:100,， dx:600， 狄：西， 运行：函数{ if！this.moving{return；} 设d=距离此值； ifd<1{ 这是我的目的； } 这个.setDelta； var slice=this.speed*this.delta； 设rad=rftvthis； 这个.x+=Math.cosrad*切片； 这个.y+=Math.sinrad*切片； }, 现在：未定义， delta：未定义， 然后：未定义， setDelta：函数{ this.now=Date.now； this.delta=this.now-this.then/1000； this.then=this.now； }, 感动：错， 开始：功能{ 这个。u start_u=Date.now； this.then=Date.now； 这是真的； }, 完:功能{ this.moving=false； console.log Date.now-此._已开始_'应接近5000'； } }; 让渲染==>{ ctx.fillStyle='ccc'； ctx.0，0，w，h； ctx.beginPath； ctx.arcobj.x，obj.y，10,0，Math.PI*2； ctx.closePath； ctx.strokeStyle=‘红色’； ctx.stroke； obj.run； requestAnimationFramerender； }; document.body.cvs； 提供

---

obj.start 你选择的缓和函数只是时间的函数。这意味着它返回一个从0到1的比率，具体取决于时间，该时间也在0到1的范围内。这意味着您必须计算经过的时间与所需的总动画时间的比率。然后，为了计算位置，您需要将返回的比率应用于您要到达this.dx-this.startX的总距离，并将其添加到起始位置

请注意，在下面的示例中，我忽略了您的rad和this.then计算，我没有真正理解您使用rad的意思，正如您所看到的，缓和必须是总距离和总动画时间的函数。因此也没有速度的概念，或者必须将其应用于总距离/动画时间

设距离=p=>Math.sqrtp.x-p.dx*p.x-p.dx+p.y-p.dy*p.y-p.dy， rftv=p=>Math.atan2p.dy-p.y，p.dx-p.x， easeInOutSin=函数t{ 返回1+Math.sinMath.PI*t-Math.PI/2； }; 让cvs=document.createElement'canvas'， ctx=cvs.getContext'2d'， w=cvs.width=700， h=cvs.height=200， cx=w/2， cy=h/2； 设obj={ x:100， startX:100， y:cy， //速度:100,， dx:600， 狄：西， 运行：函数{ if！this.moving{return；} 设d=距离此值； ifd<1{ 这是我的目的； } 这个.setDelta； /*var slice=this.speed*this.delta； 设rad=rftvthis； 这个.x+=Math.cosrad*切片*/ this.x=this.startX+this.delta*this.dx-this.startX； //这个.y+=Math.sinrad*切片； }, 现在：未定义， delta：未定义， //然后：未定义， setDelta：函数{ this.now=Date.now； this.delta=easeinoutsinthis.now-this.\u启动//5000；//this.now-this.then/1000； //this.then=this.now； }, 感动：错， 开始：功能{ 这个。u start_u=Date.now； this.then=Date.now； 这是真的； }, 完:功能{ this.moving=false； console.log Date.now-此._已开始_'应接近5000'； } }; 让渲染==>{ ctx.fillStyle='ccc'； ctx.0，0，w，h； ctx.beginPath； ctx.arcobj.x，obj.y，10,0，Math.PI*2； ctx.closePath； ctx.strokeStyle=‘红色’； ctx.stroke； obj.run； ifobj.moving{requestAnimationFramerender；} }; document.body.cvs； obj.start；

---

提供我现在明白了，所以区别在于现在我只需要旅行所需的总时间，而不是速度。这很好，先生，你会推荐第一种还是第二种方法？正如你自己所说，答案中暗示的，这些基本上都是排他性的方法。你不能有一个用来计算持续时间的放松和恒定速度。实际上这取决于你的目标，第一个需要每次计算，第二个更容易用预先计算的值参数化，我没有

---

如果我有最后一个问题，在不改变你的答案的情况下，我有足够的数学专业知识来说明哪一个更优？如果我有最后一个问题，在不改变你的答案的情况下，开始缓慢但始终增长直到达到目标而最终不减速的缓和函数，对于第二个例子，所有参数的函数是什么？我在考虑将这种函数用于项目符号：在这种情况下，寻找在没有输出的情况下易于输入的函数，这将是一个不同的函数