Javascript 如何将div动画的方向更改为单击的方向，然后继续该方向的动画？

我想动画的div已经在动画状态朝着点击方向，然后动画应该继续在该特定的方向

这是我所做的事情的链接

var$follower=$（“#follower”），
mouseX=0，
mouseY=0；
$（文档）。单击（函数（e）{
mouseX=e.pageX；
mouseY=e.pageY；
$follower.stop（）.animate（{left:mouseX，top:mouseY}）；
});
#跟随者{
位置：绝对位置；
背景色：红色；
颜色：白色；
填充：10px；
}
您需要使用
窗口。requestAnimationFrame
：

如果需要，您还可以匹配
速度
。但这是另一个层次；-）


var$follower=$（“#follower”），
mouseX=0，
mouseY=0，
向量={x:0，y:0}，
isFirst=true，
速度=0；
$（文档）。单击（函数（e）{
mouseX=e.pageX；
mouseY=e.pageY；
向量={
x:$follower.offset（）.left-mouseX，
y:$follower.offset（）.top-mouseY
}
速度=Math.sqrt（Math.pow（vector.x，2）+Math.pow（vector.y，2））*0.0001；
$follower.stop（）.animate（{left:mouseX，top:mouseY}，init）；
});
函数init（）
{ 
如果（isFirst）{render（）；}
isFirst=false；
}
函数render（）
{
var left=$follower.position（）.left-vector.x*速度；
var top=$follower.position（）.top-vector.y*速度；
//永远不要离开这一页
如果（left<0&&vector.x>0）{left=$（window.width（）}
if（left>$（window.width（）&&vector.x<0）{left=0}
如果（top<0&&vector.y>0）{top=$（window.height（）}
if（top>$（window.height（）&&vector.y<0）{top=0}
$follower.css（{left:left，top:top}）
window.requestAnimationFrame（渲染）
}
#跟随者{
位置：绝对位置；
背景色：红色；
颜色：白色；
填充：10px；
}

代码在哪里？你试过什么？请检查这一点，我已经在片段中附上了我已经厌倦的东西。谢谢回复@barbieri:-。但是如果你能告诉我如何让它只放在一个大的容器里，不要让速度增加，Square现在不会离开页面。为了获得适当的速度，你应该做一些超出你问题范围的额外工作。我相信你现在有了一个很好的起点。此外，你应该使用类似的东西，而不是jQuery
animate
，因为它的性能更好。另一件事：如果你使用
transform:translate（）
而不是
top
和
left
，你可以利用GPU而不是更快的CPU。请参见-->只是为了好玩，我尝试添加动态速度。但这并不完全正确，因为您需要更多的wotk来相应地设置
动画
。但这对你来说是一个很好的起点，甚至比以前更好。