1

デモは次のとおりです。http： //nushuttles.com/chords/player.html
上の正方形はFlashでレンダリングされ、下の正方形はJavascriptでアニメーション化されます。

おそらくお分かりのように、FlashアニメーションとJavascriptアニメーションの両方で、数秒ごとにちらつき、ぎくしゃくしたり、途切れたりすることがあります。これは、コンピューターがリソースを別のプロセスに費やし、FlashプレーヤーとJavascriptが数ミリ秒ハングしたままになることがあるためだと思います。これは他の多くのFlashおよびJavascriptアニメーションで見ましたが、画面上で一定の速度で何かを動かそうとしているときにのみ目立ちます...残念ながら、これは私がしなければならないことです。

フラッシュボックスの場合、フラッシュプレーヤーの「wmode」パラメータを「direct」に設定しました。これにより、最高のパフォーマンスが得られるはずです。また、x座標をインクリメントする代わりに、GTweenというライブラリを使用しました。これらのどちらも吃音を完全に止めることができませんでした。 Javascriptボックスには、http： //creativejs.com/resources/requestanimationframe/

で説明されているように、requestAnimationFrameと呼ばれるものを使用しています。帆布も使ってみました。それでも良くない。 FlashまたはJavascriptのいずれかで完全にスムーズなアニメーションを取得する方法はありますか？Flash Playerにプロセスの優先度を高くさせる方法はありますか？


4

1 に答える 1

0

I'm not sure why your JavaScript animation was as jerky / flashy as it was. I used CSS to do a similar animation to yours and it wasn't very jerky and did not exhibit flash. I put the code in this jsFiddle.

HTML

<div id="outer">
    <div id="abox"><div>
</div>

CSS

#outer { background-color: black; width: 500px;  height: 500px; }
#abox {
    position: relative; top: 20px;
    background: red;
    width: 100px; height: 100px;
}

JavaScript/jQuery:

$(document).ready(function(e) {
    var ttime, $abox, width, toRight;

    ttime = 4000;
    $abox= $("#abox");
    width = $("#outer").outerWidth() - $abox.outerWidth();
    toRight = true;
    function swing() {
        var leftTo = (toRight ? width : 0);
        toRight = !toRight;

        $abox.animate({
            left: leftTo
        }, ttime, function() {
            setTimeout(swing, 50);
        });
    }

    setTimeout(swing, 50);
});
于 2012-10-04T02:28:13.090 に答える