在javascript中，有没有一种方法可以创建变量和函数来“模拟”鼠标的平滑移动？例如，该函数模拟用户从浏览器窗口的左下角开始，然后在随机方向上缓慢移动鼠标...
该函数将在每次调用鼠标时返回鼠标将移动的下一个位置的x和y值（可能会使用setInterval之类的名称来继续调用它以获取下一个鼠标位置）。假设鼠标永远不会离开屏幕，则移动应限制在屏幕的宽度和高度上。
我不希望鼠标在整个地方超快地跳跃。我喜欢平稳的动作/位置返回。
没有上下文，“逼真的鼠标移动”并不意味着任何事情：
每个鼠标用户在此设备上都有不同的行为，并且鉴于他们在屏幕上所拥有的，他们甚至不会做出相同的手势。
如果您使用第一人称射击游戏，则在整个水平屏幕上，大多数动作都将在较小的垂直范围内。
这是我在玩一些FPS游戏时记录我的鼠标动作而制成的“滴水画”。
但是，如果我们进入Google主页，我什至不使用鼠标。输入已经集中，我只使用键盘。
在一些无限滚动的网站上，我的鼠标可以停留在同一位置数十分钟，并仅在某个时候转到链接。
我认为，为了获得更逼真的鼠标移动，您必须记录所有用户的手势，然后对其进行复制。
同样，一个好的策略可能是获取将更可能吸引用户光标的元素的坐标（例如SO的问题下的“关闭”链接），并使移动到达那些元素的坐标。
无论如何，我在这里制作了一个片段，使用Math.random()和requestAnimationFrame()来使对象平滑移动，并需要暂停和变速。
// Canvas is here only to show the output of function
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var maxX = canvas.width = window.innerWidth;
var maxY = canvas.height = window.innerHeight;
window.onresize = function(){
maxX = canvas.width = window.innerWidth;
maxY = canvas.height = window.innerHeight;
}
gc.onclick = function(){
var coords = mouse.getCoords();
out.innerHTML = 'x : '+coords.x+'<br>y : '+coords.y;
}
var Mouse = function() {
var that = {},
size = 15,
border = size / 2,
maxSpeed = 50, // pixels per frame
maxTimePause = 5000; // ms
that.draw = function() {
if (that.paused)
return;
that.update();
// just for the example
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(show.checked){
ctx.drawImage(that.img, that.x - border, that.y - border, size, size)
}
// use requestAnimationFrame for smooth update
requestAnimationFrame(that.draw);
}
that.update = function() {
// take a random position, in the same direction
that.x += Math.random() * that.speedX;
that.y += Math.random() * that.speedY;
// if we're out of bounds or the interval has passed
if (that.x <= border || that.x >= maxX - border || that.y <= 0 || that.y >= maxY - border || ++that.i > that.interval)
that.reset();
}
that.reset = function() {
that.i = 0; // reset the counter
that.interval = Math.random() * 50; // reset the interval
that.speedX = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the horizontal direction
that.speedY = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the vertical direction
// we're in one of the corner, and random returned farther out of bounds
if (that.x <= border && that.speedX < 0 || that.x >= maxX - border && that.speedX > 0)
// change the direction
that.speedX *= -1;
if (that.y <= border && that.speedY < 0 || that.y >= maxY - border && that.speedY > 0)
that.speedY *= -1;
// check if the interval was complete
if (that.x > border && that.x < maxX - border && that.y > border && that.y < maxY - border) {
if (Math.random() > .5) {
// set a pause and remove it after some time
that.paused = true;
setTimeout(function() {
that.paused = false;
that.draw();
}, (Math.random() * maxTimePause));
}
}
}
that.init = function() {
that.x = 0;
that.y = 0;
that.img = new Image();
that.img.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABJUlEQVRIic2WXbHEIAyFI6ESKgEJkVIJlYCTSqiESIiESqiEb19gL9Od3f5R5mbmPPHwBTgnIPJfChiAGbCkCQgtG7BpmgAWIALaDDyOI2bGuq40BasqIoKZATgwNAWHEEjHbkBsBhYRVJUYIwBNwVlFaVOwiDDPMylmQ1OwquY7d0CBrglYkuEeidoeOKt61I6Cq0ftKFhqR+0MOKuo2BQsInnndvnOr4JvR+0qWO5G7Q44K0XtOXDf96jqh9z9WXAy1FJ8l0qd+zbtvU7lWs7wIzkuh8SvpqqDi3zGndPQauDkzvdESm8xZvbh4mVZ7k8ud/+aR0C3YPk7mVvgkCZPVrdZV3dHVem6bju1roMPNmbAmq8kG+/ynD7ZwNsAVVz9dL0AhBrZq7F+CSQAAAAASUVORK5CYII=";
that.reset();
}
that.getCoords = function(){
return {x: that.x, y:that.y};
}
that.init()
return that;
}
var mouse = new Mouse()
mouse.draw();html,body {margin: 0}
canvas {position: absolute; top:0; left:0;z-index:-1}
#out{font-size: 0.8em}<label for="show">Display cursor</label><input name="show" type="checkbox" id="show" checked="true"/><br>
<button id="gc">get cursor Coords</button>
<p id="out"></p>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句