Esta respuesta va a contener dos posibles soluciones:
- si quieres lanzar la rueda: que se mueva una vez se suelte el ratón, dependiendo de la distancia y tiempo pulsado; y
- si quieres empujar la rueda: que se mueva con el ratón mientras éste esté pulsado.
La idea en ambos casos es bastante similar. Escuchar cuando se pulsa el ratón sobre la rueda y a partir de ahí hacer cálculos para moverla cuando corresponda. Aquí te dejo las dos opciones.
Lanzar la rueda
Si lo que quieres es lanzar la rueda, es decir, que no se mueva mientras el ratón se está moviendo, si no que la animación dependa de la distancia recorrida y el tiempo que se haya tenido pulsado el ratón, puedes hacer algo parecido a esto:
- Detectar cuando el ratón se pulsa sobre la rueda y guardar:
- La posición inicial del ratón (usando
clientX
)
- El tiempo en el que se pulsó la rueda (con
getTime()
)
- Cuando el ratón se deja de pulsar, si cuando se pulsó fue sobre la rueda, hacer lo siguiente:
- Obtener la posición actual del ratón
- Obtener el tiempo en el que se soltó el ratón
- Calcular la distancia y dirección (posición actual - posición inicial del ratón)
- Animar la rueda con el mismo tiempo que el ratón estuvo pulsado, teniendo en cuenta su posición actual, la distancia y la dirección.
El código sería así:
var movimiento = 0;
var origen = 0;
var tiempo = 0;
$(document).on("mouseup", function(e) {
if (movimiento) {
movimiento = 0;
var distancia = e.clientX - origen;
var fin = new Date().getTime();
var diftiempo = fin - tiempo;
$("#item").stop().animate({
left: (parseInt($("#item").css("left")) + distancia) + "px",
}, {
step: function(now, fx) {
$("#item").css("transform", "rotate(" + now + "deg)")
},
duration: diftiempo
})
}
});
$("#item").on("mousedown", function(e) {
movimiento = 1;
origen = e.clientX;
tiempo = new Date().getTime();
});
#item {
position: absolute;
margin: 0 auto;
width: 300px;
height: 300px;
left: 0%;
background-color: #000;
background-size: 300px 300px;
background-image: url('http://icon-icons.com/icons2/37/PNG/512/wheel_theapplication_2969.png');
border-radius: 300px;
transform:rotate(30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item" ></div>
Eso hará que la animación dure tanto como el tiempo que haya estado pulsado el ratón, si lo que quieres es que el tiempo que haya estado pulsado el ratón sea un "indicador de fuerza" (más tiempo = animación más rápida) lo que tendrás que hacer es añadir un valor máximo y entonces calcular el tiempo de animación basándote en ese valor máximo - el tiempo que haya estado pulsado el ratón.
Empujar la rueda
En este caso, la idea es que sólo se moverá y rotará la rueda cuando el ratón esté pulsado y se mueva (empujando o tirando). Para ello:
- Cuando el ratón se pulsa sobre la imagen:
- Guardo la posición actual del ratón (
clientX
)
- Guardo la posición actual de la rueda
- Al mover el ratón:
- Se calcula la diferencia entre la posición actual del raton y la original donde se pulsó
- La diferencia se resta a la posición de la rueda
- Se asigna ese valor al ángulo que debe rotar la rueda (suponiendo que la posición inicial es
left:0
como hice, de otro modo, tendrás que realizar cálculos adicionales.
Éste sería el código (podría limpiarse si en lugar de usar variables globales usases variables o atributos asociados al elemento, lo que te permitiría animar varios elementos de forma independiente):
var movimiento = 0;
var origen = 0;
var izquierda = 0;
$(document).on("mouseup", function(e) { movimiento = 0; });
$("#item").on("mouseup", function(e) {
movimiento = 0;
}).on("mousedown", function(e) {
movimiento = 1;
origen = e.clientX;
izquierda = parseInt($(this).css("left"))
}).on("mousemove", function(e) {
var $this = $(this);
if (movimiento){
var diff = e.clientX - origen;
$this.css("left", (izquierda + diff) + "px");
$this.css("transform", "rotate(" + (izquierda+diff) + "deg)");
}
});
#item {
position: absolute;
margin: 0 auto;
width: 300px;
height: 300px;
left: 0%;
background-color: #000;
background-size: 300px 300px;
background-image: url('http://icon-icons.com/icons2/37/PNG/512/wheel_theapplication_2969.png');
border-radius: 300px;
transform:rotate(30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item" ></div>