Javascript iPhone Scroll Effect in a iFrame / Javascript Mouse Acceleration
Próbuję odtworzyć Zdarzenie flick / scroll iPhone ' a w oknie za pomocą JavaScript.
Zaczynając od JQuery, mierzę przyspieszenie i przesunięcie myszy podczas zdarzeń click-drag-release za pomocą timera:
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);
});
Teraz problem polega na przełożeniu tego przyspieszenia na ruch ekranu-czy są jakieś algorytmy (easing?) lub biblioteki animacji, które mogłyby mi w tym pomóc? (Zajrzałem do JQuery .animate (), ale nie jestem pewien jak zastosować go w sposób ciągły podczas imprezy drag!
Update-ostateczne rozwiązanie tutaj:
3 answers
Kliknij ten link, aby uzyskać pełne wyjaśnienie jednego podejścia, które wydaje się być tym, czego szukasz.
Http://www.faqts.com/knowledge_base/view.phtml/aid/14742/fid/53
Oto fragment:
Ten handler następnie ustawia Zdarzenie przechwytywanie ruchu myszy i sklepów pozycje kursora myszy w zmiennych mouseX i mouseY. Następnie rozpoczyna się timer monitor (), który mierzy prędkość kursora myszy poprzez pobranie próbki wartości w tych zmiennych w regularnych interwały. Zmienne mouseLeft i mouseTop trzymać każdy sampling myszy pozycji, a częstotliwość próbkowania wynosi Ustaw na 100 milisekund w zmienny monitor.timerDelay.
I część kodu autora:
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);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-12-19 03:11:57
Oto, co znalazłem, szukając bibliotek przewijania kinetycznego/momentum:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-03 17:45:31
Może Cię zainteresować wtyczka jQuery o nazwie overscroll: http://www.azoffdesign.com/overscroll ( GitHub page )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-21 09:14:47