1

JavaScript / jQueryを介してテキストを拡大縮小および移動しています。jQuerys animate() はフェードインとフェードアウトする必要があり、繰り返す必要があり、より多くの要素を使用する必要があるため、使用できません (最終結果: 背景から「飛んで」、さまざまな方向に移動してフェードアウトします)。

私の問題: スムーズに実行されておらず、かなりの CPU 使用率を引き起こしています。以下は、簡略化されたバージョンです。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">

    var steps = 300; // steps from start to finish

    // the final css values
    var endValueTop = 300;
    var endValueLeft = 300;
    var endValueFontSize = 100;

    // the current css values (get encreased in doAnimation())
    var currentValueTop = 100;
    var currentValueLeft = 100;
    var currentValueFontSize = 0;

    // the added values in each step
    var stepsTop = (endValueTop - currentValueTop) / steps;
    var stepsLeft = (endValueLeft - currentValueLeft) / steps;
    var stepsFontSize = (endValueFontSize - currentValueFontSize) / steps;

    function doAnimation() {

        // increase current values
        currentValueTop += stepsTop;
        currentValueLeft += stepsLeft;
        currentValueFontSize += stepsFontSize;

        // apply them
        $("#hello").css({
            top: currentValueTop,
            left: currentValueLeft,
            fontSize: currentValueFontSize
        });

        // restart if there are steps left
        if (steps--) {
            window.setTimeout(function(){
                doAnimation();
            }, 50);

        }

    }

    // start the first time
    doAnimation();

</script>

<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
  body { position: relative; }
  p#hello { position: absolute; top: 100px; left: 100px; font-size: 0px; }
</style>
</head>
<body>
  <p id="hello">Hello World</p>
</body>
</html>

JS BINでの実行例。

助言がありますか？おまけ：CPU負荷を減らす方法は？どうもありがとう！

シュテファン

4

3 に答える 3

2

まず、50 ミリ秒のタイマー内で jQuery を使用しないでください。CPU 使用率が高い原因が何かあるとすれば、それはそれです。代わりにこのようなものを使用してください

var hello = $('#hello')[0].style;

function doAnimation() {

  //code...

  hello.top = curentValueTop + 'px';
  hello.left = currentValueLeft + 'px';
  hello.fontSize = currentValueFontSize + 'px';

  //rest of code...

}

ただし、フォントのスムーズかつ一貫したスケーリングは、ほとんどのブラウザーがうまく処理できないものです。99% の確率で Web ページのテキストが顔に飛び込んでくるわけではないため、私たちはこれに気づきません。必要な最大フォント サイズでレンダリングされたテキストの画像を使用すると、よりうまくいく可能性があります。

また、50ms ~= 20fps では、画面の半分を横切るアニメーションのフレーム レートは特にスムーズではありません。jQuery を使用しない場合、CPU 使用率が大幅に低下する場合は、間隔を短くしてみてください。もちろん、ほとんどのブラウザーは、高フレーム レートのアニメーションの処理も苦手です。

そうです、最新の Web ブラウザは、20 年前のビデオ ゲーム コンソールでは問題がなかった処理を、フレーム レートの 4 分の 1 で行うのに苦労しています。

編集これを試してくださいhttp://jsbin.com/oxode/4/edit

小数を受け入れるemユニットを使用し、15ミリ秒のタイマーを使用しました（ブラウザが追いつくことができる場合は約60fps）。fontSizeご覧のとおり、アニメーション設定を少し調整する必要がありますが、よりスムーズにスケーリングされます...

于 2010-08-15T19:16:24.460 に答える
0

私は数年前にこのライブラリを携帯電話で非常にうまく使用しました。おそらく、十分に高速にするためのオーバーヘッドがほとんどありません。

http://dev.opera.com/libraries/animation/

于 2010-08-15T19:06:13.560 に答える
0

jQuery は実際には長いアニメーション用に設計されていません (そのため、「遅い」は 1 秒未満です)。そのため、高い CPU 負荷がなくなるわけではありません。

できることの 1 つは、アニメーション機能 http://api.jquery.com/animate/を使用することです。

そこでプログラムしたことの多くは、すでに実行されています。

于 2010-08-15T19:09:12.503 に答える