¿Hay alguna forma en jQuery o Javascript para determinar la velocidad de un evento touchmove?
Frecuentes
Visto 5,554 veces
1
Esta es una pregunta simple. ¿Hay alguna forma en jQuery o Javascript para determinar la velocidad de un evento touchmove? Utilizo css para tomar el elemento y hacerlo grabable, esto funciona bien, pero si muevo el dedo más rápido, es menos probable que pueda moverme a una distancia límite, pero tenía la intención de pasar la página, entonces, ¿hay alguna manera de que pueda determinar el velocidad de movimiento en el evento de movimiento táctil en javascript o jQuery, y puedo ajustar el umbral a un valor más pequeño para compensar la velocidad?
var startX, endX, difference, threshold;
var startTime, endTime, timeDiff = 151;
$('#animate')
.bind("touchstart", function (e){
e.preventDefault();
var d = new Date();
startTime = d.getTime();
startX = e.originalEvent.touches[0].pageX; //starting point
})
.bind("touchmove", function (e){
e.preventDefault();
endX =e.originalEvent.changedTouches[0].pageX; //Get the information for finger
difference = startX - endX; //calculate the distance moved.
var moved = minusScreen - difference; //determine the affected css value.
$(this).css("left",moved); //this makes the element moves with my finger.
})
.bind("touchend", function (e) {
var date = new Date();
endTime = date.getTime();
threshold = Math.abs(difference);
timeDiff = endTime - startTime;
if ((threshold > (screenWidth * 0.4)) || (timeDiff < 150)) //make the animation move only when the finger moved more than 30% of the page.
{
if (endX > startX) turnLeft();
else if (endX == startX) {} // havent decide what to do yet
else turnRight();
} else {
$(this).animate({"left": minusScreen}, 100);
}
startX=0; //set the value back to initial.
endX=0; //set the value back to initial.});
});
gracias por tu gran respuesta. lo anterior es código modificado. funcionó muy bien!!!
2 Respuestas
8
obtenga el tiempo en el touchstart y nuevamente en el touchend como este
startTime = new Date().getTime()
y endTime = new Date().getTime()
luego calcula var speed = abs(endX-startX)/(endTime-startTime)
esta es ahora su velocidad general de movimiento táctil en px/ms
Respondido el 14 de junio de 12 a las 10:06
Probé, modifiqué el código y no funciona. parecía que ambos valores se dan al mismo tiempo cuando finaliza el toque. los resultados son dos mismos valores de tiempo. - pez joe
bueno, odio decirlo, pero inicializas UNA fecha y luego le pides la hora dos veces... ve startTime = new Date().getTime()
y endTime = new Date().getTime()
- jakee
si, trabajado ¡gracias! Voy a hacer un poco de trabajo ordenado más tarde. - pez joe
3
Aunque esta es una pregunta antigua, parece que hay una "marca de tiempo" en el objeto de evento táctil, por lo que podría ser más simple y rápido de usar:
startTime = e.timeStamp();
en lugar de :
var d = new Date();
startTime = d.getTime();
Lo mismo para var endTime
Respondido 23 Oct 15, 12:10
e.timeStamp
es un DOMHighResTimeStamp
or DOMTimeStamp
no es un Function
, y en Firefox esto devuelve nanosegundos en lugar de milsegundos debido a bugzilla.mozilla.org/show_bug.cgi?id=238041 que ha estado abierto desde 2004. Tampoco es compatible con Android o Chrome hasta hace relativamente poco tiempo. Usar Date.now()
. - Adán Leggett
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery performance touch-event touchmove or haz tu propia pregunta.
obtener el tiempo en el touchstart y en el touchend calcular
abs(endX-startX)/endTime-startTime
esta es ahora su velocidad total de movimiento táctil en px/ms - jakee@jakee parece legítimo. Publicarlo como la respuesta - Kris.Mitchell