Efecto de desplazamiento de JavaScript iPhone en una aceleración de iFrame/Javascript Mouse

jquery acceleration

Question

Estoy intentando recrear el evento de desplazamiento / desplazamiento de iPhone en una ventana usando JavaScript.

Comenzando con JQuery, estoy midiendo la aceleración y el desplazamiento del mouse durante el clic - arrastre - lanzar eventos usando un temporizador:

var MouseY = {
init: function(context) {
var self = this;
self._context = context || window
self._down = false;
self._now = 0;
self._last = 0;
self._offset = 0;
self._timer = 0;
self._acceleration = 0;
$(self._context).mousedown(function() {self._down = true;});
$(self._context).mouseup(function() {self._down = false;});
$(self._context).mousemove(function(e) {self.move(e);});
},
move: function(e) {
var self = this;
self._timer++;
self._last = self._now;
self._now = e.clientY + window.document.body.scrollTop;
self._offset = self._now - self._last;
self._acceleration = self._offset / self._timer;
},
reset: function() {
this._offset = 0;
this._acceleration = 0;
this._timer = 0;
}
};
$(function() {
MouseY.init();
setInterval(function() {
$(''#info'').html(
''_acceleration:'' + MouseY._acceleration + ''<br />'' +
''_now:'' + MouseY._now + ''<br />'' +
''_offset:'' + MouseY._offset + ''<br />'' +
''_timer:'' + MouseY._timer + ''<br />''
);
MouseY.reset();
}, 10);
});

Ahora el problema es traducir esa aceleración en movimiento de pantalla. ¿Hay algún algoritmo (¿alivio?) O bibliotecas de animación que puedan ayudarme con esto. (He examinado el .animate () de JQuery, pero no estoy seguro de cómo aplicarlo continuamente durante los eventos de arrastre.

Actualización - solución final aquí:

http://johnboxall.github.com/iphone.html

Answer 1

Pulse este enlace para obtener la explicación completa de un enfoque que parece ser lo que está buscando.

http://www.faqts.com/knowledge_base/view.phtml/aid/14742/fid/53

Aquí hay un extracto:

Este controlador configura la captura de eventos para el movimiento del mouse y almacena las posiciones del cursor del mouse en las variables mouseX y mouseY. A continuación, inicia el temporizador monitorMouse () que mide la velocidad del cursor del mouse al muestrear los valores en estas variables a intervalos regulares. Las variables mouseLeft y mouseTop retienen las posiciones de cada ratón de muestreo y la velocidad de muestreo se establece en 100 milisegundos en la variable monitor.timerDelay.

Y parte del código del autor:

nn4 = (document.layers)? true:false;
mouseLeft = mouseTop = mouseX = mouseY = 0;
monitor = {
timerDelay:100,
moveLimit:2,
sampleLimit:10
};
function startMonitor(thisText) {
if (!tip) return;
toolTipText = thisText;
writeTooltip(toolTipText);
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = function (evt) {
mouseX = evt.pageX;
mouseY = evt.pageY;
return true;
}
monitorMouse();
}
function stopMonitor() {
if (!tip) return;
hideTooltip();
if (monitor.timer) {
clearTimeout(monitor.timer);
monitor.timer = null;
}
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
monitor.slowSamples = 0;
}
function monitorMouse() {
if (Math.abs(mouseX - mouseLeft) > monitor.moveLimit
|| Math.abs(mouseY - mouseTop) > monitor.moveLimit)
{
monitor.slowSamples = 0;
}
else if (++monitor.slowSamples > monitor.sampleLimit) {
showTooltip();
return;
}
mouseLeft = mouseX;
mouseTop = mouseY;
monitor.timer = setTimeout("monitorMouse()",monitor.timerDelay);
}

Answer 2

Esto es lo que encontré al buscar bibliotecas de desplazamiento cinético / de impulso:

• iScroll
• Zynga Scroller
• Overscroll
• TouchScroll
• jScrollTouch

Answer 3

Puede que le interese el plugin jQuery llamado overscroll: http://www.azoffdesign.com/overscroll ( página de GitHub )