javascript - Flash 和 Javascript 中的动画闪烁/抖动/卡顿

Question

这是一个演示: http://nushuttles.com/chords/player.html
顶部的方 block 是用 Flash 渲染的，下面的方 block 是用 Javascript 制作动画的。

正如您可能知道的那样，Flash 和 Javascript 动画中每隔几秒就会偶尔出现一些闪烁、抖动或卡顿现象。我认为发生这种情况是因为计算机偶尔会将其资源分配给另一个进程，从而使 Flash 播放器和 Javascript 挂起几毫秒。我在很多其他 Flash 和 Javascript 动画中都看到过这一点，但只有当您尝试在屏幕上以恒定速度移动某些东西时，它才会变得明显......不幸的是，这正是我需要做的。

对于 Flash 盒，我将 Flash 播放器的“wmode”参数设置为“direct”，这应该提供最佳性能。我还使用了一个名为 GTween 的库，而不是仅仅增加 x 坐标。这些都无法完全阻止口吃。

对于 Javascript 框，我使用称为 requestAnimationFrame 的东西，如下所述:http://creativejs.com/resources/requestanimationframe/ 。我也尝试过使用 Canvas 。还是没有好转。


有什么方法可以在 Flash 或 Javascript 中获得完美流畅的动画吗？有什么方法可以让 Flash 播放器为其进程提供更高的优先级吗？

Answer 1

我不知道为什么你的 JavaScript 动画如此生涩/华丽。我用 CSS 做了一个与你类似的动画，它不是很生涩，也没有表现出闪光。我输入代码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);
});