javascript - 使用 vanilla javascript 和 velocity.js 旋转 div 以面对鼠标光标缓慢运行

Question

我正在尝试创建 3D 在 X 和 Y 轴上旋转的 div，以便它始终面向鼠标光标。

我正在为动画库使用 vanilla Javascript 和 Velocity.js。

到目前为止，这是我的 Javascript 代码，请查看 html 和 css 的 Codepen 链接:

var el = document.querySelector("#circle");// get mouse position on x y
onmousemove = function(event) {
var x = event.clientX
var y = event.clientY

var HEIGHT = document.body.clientHeight;
var WIDTH = document.body.clientWidth;

console.log("x position: "+ x +", " + "y position: " + y);


var calcX= Math.floor(x/10)
var calcY= Math.floor(y/10)

Velocity(el, {rotateX:calcX})
Velocity(el, {rotateY:calcY})

// rotate element towards x and y co-ordinates

};

http://codepen.io/anon/pen/bpzjar

我知道数学计算不正确，如果有人知道正确的代码是什么，那就太棒了!

但我主要是想看看为什么代码这么慢，它似乎是在计算并遍历每个度数，而不是直接去计算最终的结果，以便它快速响应。

如果有人能帮我弄明白那就太好了。

谢谢!

Answer 1

作为一种计算方法，您可以将鼠标位置映射到度值:

var calcY = Math.round(map_range(x, 0, WIDTH,  -60, 60));
var calcX = Math.round(map_range(y, 0, HEIGHT, 60, -60));

function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

Javascript 没有原生的 Math.map 函数，但上面包含的简单帮助程序可以做到这一点(归功于 this SO answer )

这将在两个轴上从 -60 到 60 度之间旋转。

参见 codePen example for this 。

正如其他人已经提到的； Velocity.js 更适用于过渡(随时间变化的动画)，您不需要它仅用于跟随鼠标 交互。

尽管如此，您也可以使用来自 Velocity.js 的 .hook 函数助手 - 直接跳转到一个值(这是我在 codePen 示例中使用的)。

Velocity.hook(el, "rotateX", calcX+"deg");
Velocity.hook(el, "rotateY", calcY+"deg");