Javascript-从任意位置将元素动画到屏幕中心

我有一个红色的div，用户可以点击并拖动屏幕上的任何地方。灰色div相对于红色div定位，并随着红色div的移动而自动更新。使用鼠标滚轮滚动应该会导致红色div（以及随后的灰色div）从其所在的任何位置移动到窗口中心，然后停止

到目前为止，我有当前坐标、目标坐标、距离和角度（以度为单位）。它们被记录到控制台中

到目前为止我所拥有的：

任何帮助都将不胜感激。

您使用的是jquery吗

使用.animate（）可以告诉它根据CSS属性移动（从）

---

使用

document.body.clientWidth

获取浏览器窗口的宽度，使用

document.body.clientHeight

获取高度，然后将div设置为中心，即：-

var mydiv = document.getElementById('mydivid');
mydiv.top = ((parseInt(document.body.clientHeight) / 2) - (parseInt(myDiv.Height) / 2)) +'px';
mydiv.left = ((parseInt(document.body.clientWidth) / 2) - (parseInt(myDiv.Width) / 2)) +'px';

如果你想让它“滑动”到中心，你可以在CSS中添加一些变换样式

    div.#mydiv {
    -webkit-transition: all 1.0s ease-in-out;  
    -moz-transition: all 1.0s ease-in-out;  
    -o-transition: all 1.0s ease-in-out;  
    -ms-transition: all 1.0s ease-in-out;  
    transition: all 1.0s ease-in-out;  
}

---

在1秒的时间内设置移动到中心的动画

谢谢您的回复。不幸的是，我不能使用jquery，因为它更符合游戏逻辑，我假设其中涉及了一些trig和可能的物理特性？欢迎使用StackOverflow！我们鼓励您与我们分享迄今为止的代码。并解释，你试图解决你的问题。谢谢保罗-我意识到我改变了问题的某些方面，使用鼠标滚轮而不是单击事件来开始向中心设置div动画。我也链接到了plunkr。我真的很感谢你的时间和帮助。你的解决方案很好-我的问题需要改进。

    div.#mydiv {
    -webkit-transition: all 1.0s ease-in-out;  
    -moz-transition: all 1.0s ease-in-out;  
    -o-transition: all 1.0s ease-in-out;  
    -ms-transition: all 1.0s ease-in-out;  
    transition: all 1.0s ease-in-out;  
}