JavaScript Effet de défilement de l'iPhone dans une accélération de souris iFrame/Javascript

Question

J'essaie de recréer l'événement flick/scroll iPhone dans une fenêtre en utilisant JavaScript.

A partir de JQuery, je mesure l'accélération de la souris et du décalage en un clic - glisser - des événements de relâchement à l'aide d'une minuterie:

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); 

}); 

Maintenant, le problème se traduit par cette accélération dans le mouvement de l'écran - sont-il des algorithmes (assouplissement?) ou des bibliothèques d'animation qui pourraient m'aider à ce sujet? (Je l'ai regardé dans le .animate de JQuery() mais je ne suis pas sûr de la façon de l'appliquer de façon continue pendant les événements de drag

Mise à jour - solution finale ici:

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

Answer 1

Hit ce lien pour l'explication complète d'une approche qui semble être ce que vous cherchez

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

Voici un extrait:.

Ce gestionnaire établit alors l'événement capture pour le mouvement de la souris et stocke positions du curseur de la souris dans les variables mouseX et mouseY. Il démarre ensuite le timer monitorMouse() qui mesure la vitesse du curseur de la souris en échantillonnant les valeurs dans ces variables aux intervalles réguliers . Les variables mouseLeft et mouseTop maintiennent les positions de chaque souris d'échantillonnage et la fréquence d'échantillonnage est de définie sur 100 millisecondes dans la variable variable monitor.timerDelay .

Et quelques-uns du code de l'auteur:

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

Vous pourriez être intéressé par le plugin jQuery nommé Défilement prolongé: http://www.azoffdesign.com/overscroll (GitHub page)

Answer 3

Voici ce que j'ai trouvé lors de la recherche de cinétique/dynamique bibliothèques de défilement:

• iScroll
• Zynga Scroller
• Overscroll
• TouchScroll
• jScrollTouch