0

所以目前我有一个弹跳物体的动画，它每秒播放 20 次

    1000/50 = 20 times a second

代码如下，可以假设所有变量都已正确初始化

        var animation = setInterval(function () {
            currentFrame++;
            if (speedX <= 0.0) {
                clearInterval(animation);
            }
            speedX -= 0.03;
            speedY = (speedY + Math.sqrt((2 * currentFrame) / gravityPull));
            yPosition += speedY;

            if (yPosition > groundY) {
                speedY *= -1;
                yPosition = groundY;
            }
            xPosition += speedX;
            $("#box").offset({ top: yPosition, left: xPosition });

        }, 50);

这在 IE 中创造了非常低的性能，尽管 Chrome 似乎完全可以运行此代码。事实上，它太糟糕了，它会减慢计算机的大部分速度。

这里有什么问题吗？看起来计算相当简单......帧速率不是很高，每秒 20 帧并不极端，但对于不那么波折的动画来说仍然足够流畅。

4

1 回答 1

3

新发现：Internet Explorer 很烂。

好吧，至少 IE8 和更早版本。IE9 表现不错。

setTimeout由and触发的定时函数的问题setInterval在于，浏览器会在时间到期时尝试执行函数，但这实际上只有在它空闲时才会发生。而且由于 Internet Eplorer <9 非常慢，而且总是“迟到”某些东西，你可以理解为什么那个动画不好。

问题是每次执行一个“帧”，IE8 需要超过 50 毫秒才能完成所有由计算和 DOM 变化引起的任务。

于 2012-06-08T00:12:16.493 回答