Эффект прокрутки iPhone на Javascript при ускорении мыши iFrame / Javascript
Я пытаюсь воссоздать событие щелчка / прокрутки iPhone в окне с помощью JavaScript.
Начиная с JQuery, я измеряю ускорение и смещение мыши во время событий click - drag - release с помощью таймера:
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);
});
Теперь проблема заключается в переводе этого ускорения в движение экрана - есть ли какие-нибудь алгоритмы (ослабление?) Или библиотеки анимации, которые могли бы мне помочь в этом? (Я изучил JQuery .animate (), но я не уверен, как применять его постоянно во время событий перетаскивания!
Обновление - окончательное решение здесь:
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Перейдите по этой ссылке, чтобы получить полное объяснение одного подхода, который вам кажется именно тем, что вам нужно.
http://www.faqts.com/knowledge_base/view.phtml/aid/14742/fid/53
Вот отрывок:
This handler then sets up event capture for mouse movement and stores mouse cursor positions in variables mouseX and mouseY. It then starts the timer monitorMouse() which measures mouse cursor speed by sampling the values in these variables at regular intervals. The variables mouseLeft and mouseTop hold each samplings mouse positions and the sampling rate is set to 100 milliseconds in the variable monitor.timerDelay.
И немного авторского кода:
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);
}
Возможно, вас заинтересует плагин jQuery с именем overscroll: http://www.azoffdesign.com/overscroll (Страница GitHub)
Вот что я нашел при поиске библиотек кинетической / импульсной прокрутки:
удивительный. Спасатель жизни + AAA ++ представитель
С помощью ответа я более-менее решил вот этот: johnboxall.github.com/iphone.html