使用原版 javascript 和 velocity.js 慢慢旋转 div 以面对鼠标光标运行

Question

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

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

这是我目前的 Javascript 代码，请参阅 html 和 css 的 Codepen link：

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

默认情况下，velocity.js has a duration of 400 milliseconds 用于转换。每次您的鼠标光标改变位置时，rotateX 都会对新的旋转进行排队。

也许这更接近你想要的：

Velocity(el, {rotateX:calcX, duration:10}, { queue: false })
Velocity(el, {rotateY:calcY, duration:10}, { queue: false })

Answer 2

你不需要速度就能得到你想要的东西。

你只需要requestAnimationFrame（velocity在里面用到了）。请阅读 Paul Irish 的 this post，他比我更好地解释了如何使用 requestAnimationFrame

请看这个工作 fiddle https://jsbin.com/vekuce.

希望对您有所帮助。

Answer 3

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

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 更适合过渡（随时间变化的动画），您不需要它仅用于 follow mouse 交互。

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

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

使用原版 javascript 和 velocity.js 慢慢旋转 div 以面对鼠标光标运行

Rotate div to face mouse cursor running slowly using vanilla javascript and velocity.js

javascript

html

css

css-animations

velocity.js

使用原版 javascript 和 velocity.js 慢慢旋转 div 以面对鼠标光标 运行

Rotate div to face mouse cursor running slowly using vanilla javascript and velocity.js

javascript

html

css

css-animations

velocity.js

使用原版 javascript 和 velocity.js 慢慢旋转 div 以面对鼠标光标运行