2

特定の要素がクリックされると、5 ～ 6 個の個別の画像をアニメーション化して、ページ上を移動したいと考えています。このアニメーションを 1 ～ 2 秒以内に抑えたいと考えています。

それほど優れていないコンピューターでこれがどれだけ速く実行されるかが心配です。

コードは、画像ごとに異なるクラスで次のようになると思います。

$("#startAnimation").click(function(){
$(".toBeAnimated").animate({ 
    marginLeft: "+=250px",
}, 1000 );
});

皆さん、おすすめはありますか？これは多すぎますか？

ありがとう！

4

1 に答える 1

2

jQuery アニメーションの仕組みでは、アニメーションは常に指定した時間内に完了します。低速のコンピューターで非常に低速のブラウザーを使用していても、アニメーションは目的の時間内に完了します。

問題は、アニメーションがどれだけスムーズに表示されるか、どれだけびくびくするかです。低速のブラウザー/低速のコンピューターでは、多数の個別のフレームを表示してアニメーションをスムーズに実行するのに十分な CPU がないため、大きなステップで移動しますが、それでも目的の時間内に終了します。

最悪の場合、低速のコンピューターではアニメーションがぎくしゃくしたり、びくびくしたりします。アニメーションがびくびくするときにアニメーションを表示しないようにする場合は、少し大きなプロジェクトになります。アニメーションを実行するホスト コンピューターの機能をテストする何らかのランタイム テストを考案する必要があります。ホスト コンピューターが遅い側にあることがわかった場合は、そのコンピューターでアニメーションをスキップします。一般的な考え方は、ページの読み込み時に何をするかを表すテスト アニメーションを実行し、時間があると思われるフレームの数を数えることです。

いくつかの実験の後、テスト アニメーションで 1 秒あたりのフレーム数が X 未満である場合は、このコンピューターでアニメーションを使用しないように Cookie を設定するというしきい値を設定しました。ホストの機能が変更された場合に定期的にテストを再実行できるように、Cookie の有効期限を数か月で設定できます。今後のページ アクセスでは、最初に Cookie を確認し、Cookie が存在する場合は、テストを再度実行するのではなく、Cookie からのテスト結果を使用します。

于 2012-08-13T22:51:34.733 に答える