2

私は HTML5 アプリケーションを作成しており、jQuery ui ドラッグ可能を使用して一方の端から矢印を回転させるために CSS3 変換 (css3 回転) を使用しました。jQuery UI Touch Punch ライブラリ (v0.2.2) を統合して、Ipad やタブレットなどのタッチ デバイスでそのドラッグ イベントを模倣しました。

Android タブレット (4.1) を除くすべてのプラットフォームで矢印がスムーズに回転します。一種のラグが発生しているようで、フレーム単位で回転する (デバイス上で指を回転させてから 3 ～ 4 秒後に矢印が回転する) か、時間通りにタッチを検出できません。これを多くのタブレットでテストしたので、ハードウェアの問題ではないと確信しています。インターネットで調べたところ、変換に関してアンドロイドの css3 アニメーションに問題があることがわかりました。しかし、それが理由だとは思いません。

これが私のコードです。パフォーマンスの問題はコードに関連していないと確信していますが、それでもそう感じる場合は、お気軽にコメントしてパフォーマンスを改善してください。jquery タッチ パンチと同じ機能を実装するライブラリが他にある場合は、それらも試してみたいと思います。提案してください。

$('#arrow').draggable({
    handle: '#arrow',
    opacity: 0.01,
    helper: 'clone',
    refreshPositions: true,
    cursorAt : {left: 0 , top: 0},
    drag: function(event, ui){
        var curr_x = ui.offset.left;
        var curr_y = ui.offset.top;
        var radians = Math.atan2(curr_x - 40, curr_y - 500);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        var rotateCSS = 'rotate(' + degree + 'deg)';
         $(this).css({
                'transform': rotateCSS,
                '-moz-transform': rotateCSS,
                '-webkit-transform': rotateCSS,
                '-ms-transform': rotateCSS,
                '-o-transform': rotateCSS,
         });
     }
});
4

1 に答える 1

1

コードに問題はありません。残念ながら、Android ブラウザはバージョン間で劇的に変化するため、この遅延はごく一部のユーザーにのみ影響を与える可能性があります。

あなたのプロセスを最適化するために私が考えることができる唯一の方法は、jquery ui のドラッグ可能なものを削除し (jQuery UI は非常に複雑で非効率的であることでよく知られています)、代わりにコア js または単純な jquery を小さなフットプリントのタッチ ライブラリと組み合わせて使用​​して機能を記述することです。http://eightmedia.github.io/hammer.js/など

ただし、私の意見では例がないと確認できませんが、あなたの問題は、android 4.1 での cssTransitions の最新サポートの欠如、または上記のラップトップの処理能力の欠如です。

jquery draggable は .css() ではなく .animate() を使用して移動するため、多くの場合、jquery によってパフォーマンスが低下するため、トランジションは役に立たなくなります。

これで解決したかもしれませんが、情報がお役に立てば幸いです。

于 2013-04-09T20:10:58.837 に答える