4

ペット プロジェクトにいくつかのタッチスクリーン機能を実装するために、hammer.js を使用しています。

目的の製品は、ドラッグしてドラッグし、タッチスクリーンでズームインおよびズームアウトできるマップです。ピンチ/ピンチアウトのメカニズムが非常に遅いことを除けば、すべてがうまく機能しています。ピンチが発生してからイベントが発生するまでの間には、非常に顕著な遅延があります。

関連する JQuery/JS コードは次のとおりです。

編集: コードは、Simon の提案に従って、より優れた (そしてより高速な) ものになりました。完成版はこちら

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale > 1) {
        scale = ('scale(' + (scale - .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
      }
    })
    .on("pinchout", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale < 5) {
        scale = ('scale(' + (scale + .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
      }
  });
});

ハンマー.jsのドキュメント

4

1 に答える 1

11

これは、各イベント ハンドラーで多くの計算を行うため、ぎくしゃくしています。

まず、変数をキャッシュします。呼び出し$('#map')は常に DOM に入り、オブジェクトを取得して返します。これを一度だけ行い、結果をキャッシュします。

計算後も同じです。これを常に呼び出すのではなくa[0] + a[7]、一度計算し、複数回適用してください。

次に、.css()呼び出しを複数の属性を持つ 1 つの呼び出しだけに結合します。

それは役に立ちますが、シルクのように滑らかなものを得るには、以下をお読みください。

アニメーションをスムーズにすることはそれほど難しくありませんが、どこを改善し、レイアウトのコスト、リフロー、および再レイアウトを制限する方法を理解する必要があります。ここですべてを説明することはできませんが、調査するためのいくつかの概念を提供できます。

まず、requestAnimationFramecss の変更を開始する前に使用します。これにより、css の変更がアニメーション フレームの最後ではなく最初に行われるようになるため、フレームをスキップするリスクを減らすことができます。

次に、可能な限り css3 変換を使用してみてください (CSS スタイルシートを使用するという意味ではなく、JavaScript で css3 プロパティを使用するという意味です)。これらのプロパティは、はるかに優れたパフォーマンスを発揮します。同時に、コストのかかる CSS スタイルのほとんどを削除してみてください。レンダリング時間のコストが高いもの (ドロップ シャドウなど) があるため、多くのテストを行ってください。

次に、60 fps レートの尊重に関するほとんどの Google 開発チームのプレゼンテーションと、ウェブサイトのジャンクをなくす方法について確認して読んでください。多くの場合、何が起こっているのかをよりよく理解するのに役立つ基本的な概念を提示し、サイトのパフォーマンスをどこでどのように最適化して追跡するかを示します。

于 2013-10-18T17:13:13.567 に答える