Drehen Sie div zu Gesicht Mauszeiger läuft langsam mit Vanille Javascript und velocity.js

Question

Ich versuche, div, dass 3D dreht sich auf der X-und Y-Achse, so dass es immer auf den Mauszeiger.

Ich benutze Vanille Javascript und Velocity.js für die Animationsbibliothek.

Hier ist mein Javascript-Code, so weit Sie bitte die Codepen Link für die HTML und CSS sehen:

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

Ich weiß, dass die Mathematik Berechnung nicht korrekt ist, wenn jemand weiß, Was wäre der richtige Code dafür, das wäre toll!

Aber ich versuche hauptsächlich zu sehen, warum der Code so langsam ist und es scheint zu berechnen und zu jedem Grad zu gehen, anstatt direkt zu gehen, was die endgültige Berechnung wäre, so dass es schnell und ansprechend ist.

Wenn jemand mir helfen könnte, es herauszufinden, wäre großartig.

danke!

Answer 1

Als Berechnungsansatz Sie Ihre Mausposition zu Gradwerte abbilden:

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 hat keine native Math.map Funktion aber die einfache Helfer der obigen Tabelle enthalten wird es tun (Kredit this SO answer)

Diese wird zwischen -60 bis 60 Grad auf beiden Achsen drehen.

Siehe codePen example for this.

Wie andere bereits erwähnt haben; Velocity.js ist mehr für Übergänge (im Laufe der Zeit Animationen) und Sie brauchen es nicht nur für follow mouse Interaktionen.

Nichtsdestotrotz können Sie auch den .hook-Funktionshelfer von Velocity.js - verwenden, der direkt auf einen Wert springt (das ist, was ich im CodePen-Beispiel verwendet habe).

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

Answer 2

Standardmäßig velocity.js has a duration of 400 milliseconds für Transformationen. Jedes Mal, wenn der Mauszeiger seine Position ändert, wird rotateX eine neue Leichtigkeit in die neue Rotation einreihen.

Vielleicht ist das näher an, was Sie wollen:

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

Answer 3

Sie brauchen nicht Geschwindigkeit für das, was Sie wollen.

Alles, was Sie brauchen, ist requestAnimationFrame (Geschwindigkeit verwendet es innen). Bitte lesen Sie this post von Paul Irish, erklären er, wie man requestAnimationFrame besser als ich

verwenden und bitte sehen Sie diese Arbeit fiddle https://jsbin.com/vekuce.

Ich hoffe, es hilft.