Question

我试图将一个物体移动一定距离，让它容易进出运动。我有这个：

this.x/y是对象的终点 moveable是对象 this.duration是移动完成所需的帧数 this.time是自移动开始以来已经过的帧数

moveable.x += 
    (Math.cos(Math.PI * 2 * (this.time/this.duration) + Math.PI)/2 + .5) * ((this.x - moveable.x) / (this.duration - this.time)) * Math.PI;

moveable.y += 
    (Math.cos(Math.PI * 2 * (this.time/this.duration) + Math.PI)/2 + .5) * ((this.y - moveable.y) / (this.duration - this.time)) * Math.PI;

这使得对象非常接近它需要去的地方，但不是很靠近正确的地方。我不太确定我应该使用什么样的等式。有什么帮助吗？

PS - 由于我不会进入的各种原因，我宁愿不以速度和加速度来做这件事。

Answer 1

您可以使用CSS动画和过渡，但如果我们坚持使用您的javascript（理论上）：

轻松放松：

考虑函数（cos（π（x + 1））+ 1）/ 2.当x从0变为1时，这将从0缓到1。我正在重新定义moveable而非+=添加到其中。

var init=[x:moveable.x , y:moveable.y] // initial position
...
moveable.x = 
( Math.cos( Math.PI*(this.time/this.duration+1) )+1 )/2 //goes from 0 to 1
    * (this.x - init.x) //total difference in position (now goes from 0 to dx)
    + init.x // goes from init.x to this.x

然后您可以重复y。

在一段时间内缓和运动

1 个答案: