image - jquery touchmove イベントと非常に大きなコンテンツ

Question

非常に大きなコンテンツ (たくさんの写真) があります。CSS3トランジショントランスフォームを使いたいです。touchmove イベントにバインドし、新しい x 位置を計算します。

しかし、問題があります: x による位置がモバイルでスムーズに変化しません (デスクトップではすべて問題ありません)。Event Touch には遅延が伴います。

使用されていないコンテンツ (vissability: hidden) を非表示にしてみますが、それは役に立ちません。

Answer 1

イベント ハンドラーが変更を加える速度を調整してみてください。直感に反しますが、物事を遅くすることで、より速く見えるようになります。touchmove イベントは、画面のリフレッシュ レートよりもはるかに速く、信じられないほど高速で発生しています。

理想的には、requestAnimationFrameを使用してそれを行います。

または、それが実験的すぎる場合は、1 秒あたり 60 フレーム (画面のリフレッシュ レートである 1000/60 ミリ秒ごとに 1 つのイベント ハンドラー アクション) よりも速くイベント ハンドラー アクションを実行していないことを確認してください。1000/60 ミリ秒でまだ問題がある場合は、より遅いレートを試してください。動画のフレームレートは毎秒30フレーム。30 から 60 フレームの間が見栄えがよいはずです。

したがって、次のようになります。

var lastFrameTime;
var myTouchMoveHandler = function (e) {
    var now = Date.now();
    if (now < lastFrameTime + 1000/60) {
        return;
    }
    // your event handler code afterward
    // ...
    // then update the lastFrameTime 
    lastFrameTime = now;
}