Estoy tratando de crear un div que gire en 3D en los ejes X e Y para que siempre esté orientado hacia el cursor del mouse.

Estoy usando vanilla Javascript y Velocity.js para la biblioteca de animación.

Aquí está mi código Javascript hasta ahora, consulte el enlace Codepen para html y css también:

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

Sé que el cálculo matemático no es correcto, si alguien sabe cuál es el código correcto para eso, ¡sería increíble!

Pero principalmente estoy tratando de ver por qué el código es tan lento y parece calcular e ir a través de cada grado en lugar de ir directamente a lo que sería el cálculo final para que sea rápido y receptivo.

Si alguien pudiera ayudarme a resolverlo, sería genial.

¡Gracias!

1
Marco Angelo 9 may. 2016 a las 15:47

3 respuestas

La mejor respuesta

Como método de cálculo, puede asignar la posición del mouse a valores de grado:

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 no tiene la función nativa Math.map, pero el simple asistente incluido anteriormente lo hará (crédito a esta respuesta SO)

Esto rotará entre -60 y 60 grados en ambos ejes.

Vea el ejemplo de codePen para esto.

Como otros ya han mencionado; Velocity.js es más para transiciones (animaciones a lo largo del tiempo) y no lo necesita solo para interacciones follow mouse.

Sin embargo, también puede usar el asistente de función .hook de Velocity.js, que salta directamente a un valor (esto es lo que he usado en el ejemplo de codePen).

Velocity.hook(el, "rotateX", calcX+"deg");
Velocity.hook(el, "rotateY", calcY+"deg");
0
Community 23 may. 2017 a las 12:14

Por defecto, velocity.js tiene una duración de 400 milisegundos para las transformaciones. Cada vez que el cursor del mouse cambia de posición, rotateX pondrá en cola una nueva facilidad para la nueva rotación.

Quizás esto esté más cerca de lo que quieres:

Velocity(el, {rotateX:calcX, duration:10}, { queue: false })
Velocity(el, {rotateY:calcY, duration:10}, { queue: false })
0
Bemmu 9 may. 2016 a las 13:53

No necesitas velocidad para lo que quieres.

Todo lo que necesitas es requestAnimationFrame (la velocidad lo usa dentro). Lea esta publicación de Paul Irish, explica cómo usar requestAnimationFrame Mejor que yo

Y vea este violín de trabajo https://jsbin.com/vekuce.

Espero que sea de ayuda.

0
AldoRomo88 9 may. 2016 a las 14:04