1

这是一个演示： http: //nushuttles.com/chords/player.html
上面的方块是用 Flash 渲染的，下面的方块是用 Javascript 动画的。

正如您可能知道的那样，在 Flash 和 Javascript 动画中，每隔几秒就会出现一些偶尔的闪烁、抖动或卡顿。我想这是因为计算机偶尔会将其资源用于另一个进程，导致 Flash 播放器和 Javascript 挂起几毫秒。我在许多其他 Flash 和 Javascript 动画中都看到了这一点，但只有当你试图在屏幕上以恒定速度移动某些东西时它才会变得明显……不幸的是，这正是我需要做的。

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

对于 Javascript 框，我使用了一个名为 requestAnimationFrame 的东西，如下所述：http ://creativejs.com/resources/requestanimationframe/ 。我也尝试使用画布。还是好不了。


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

4

1 回答 1

0

我不确定为什么你的 JavaScript 动画像以前那样生涩/华丽。我用 CSS 做了一个与你类似的动画，它不是很生涩，也没有表现出闪光。我把代码放在这个 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 回答