具有步进功能的jquery动画不能正常运行

Question

我正在尝试使用jquery animate和step回调函数制作画布动画。 我面临的问题是动画运行得太快了。如果我将持续时间设置为6秒，它会在不到1秒的时间内运行，然后我必须等待另外5秒才能完成回调。

这是一段录像。我已经跟踪了step函数中的“now”参数以及自启动以来经过的时间： http://screencast.com/t/pPj87yBVOKY

您可以看到浏览器在动画运行时正在追踪值，然后停止几秒钟然后它就会结束。

以下是一些代码：

obj.percent = 0;
        $(obj).animate({percent: 100},{duration: transitionConfig.tweenDuration * 1000, easing: getEasing(transitionConfig.tweenType, transitionConfig.easeType), complete: onTransitionEnd, step: processFrame});

function processFrame(x, y) {
        timePassed = new Date().getTime() - time;

        showOutput.width = showOutput.width;
        showOutput.height = showOutput.height;
        var cx = config.width / 2;
        var cy = config.height / 2;
        var rad = Math.sqrt(cx * cx + cy * cy);
        var start = 0;

        var amount = x;
        console.log(x, timePassed);
        showDraw.beginPath();
        showDraw.moveTo(cx, cy);
        showDraw.lineTo(config.width, cy);
        showDraw.arc(cx, cy, rad, start, amount, false);
        showDraw.lineTo(cx, cy);
        showDraw.closePath();
        showDraw.fillStyle = pattern;
        showDraw.fill();
    }