12

JavaScriptを使用してウィンドウ内でiPhoneのフリック/スクロールイベントを再現しようとしています。

JQuery から始めて、タイマーを使用してクリック - ドラッグ - リリース イベント中のマウスの加速度とオフセットを測定しています。

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() を調べましたが、ドラッグ イベント中に継続的に適用する方法がわかりません!

更新 - ここでの最終的な解決策:

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

4

3 に答える 3

9

キネティック/モメンタムスクロールライブラリを探しているときに見つけたものは次のとおりです。

于 2011-01-04T04:06:26.157 に答える
4

あなたが探していると思われる1つのアプローチの完全な説明については、このリンクをクリックしてください。

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

ここに抜粋があります：

次に、このハンドラーは、マウスの動きのイベント キャプチャを設定し、マウス カーソルの位置を変数 mouseX および mouseY に格納します。次に、これらの変数の値を一定の間隔でサンプリングすることにより、マウス カーソルの速度を測定するタイマー monitorMouse() を開始します。変数 mouseLeft と mouseTop は、各サンプリング マウスの位置を保持し、サンプリング レートは変数 monitor.timerDelay で 100 ミリ秒に設定されます。

そして、著者のコードのいくつか：

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);
}
于 2008-12-19T03:11:57.833 に答える
2

overscroll という名前の jQuery プラグインに興味があるかもしれません: http://www.azoffdesign.com/overscroll ( GitHub ページ)

于 2010-02-04T20:29:26.493 に答える