JQuery анимировать с пошаговой функцией не работает, как следует - PullRequest
Новая
       12

JQuery анимировать с пошаговой функцией не работает, как следует

1 голос
/ 08 декабря 2011

Я пытаюсь сделать анимацию холста, используя jquery animate и пошаговую функцию обратного вызова.Проблема, с которой я сталкиваюсь, заключается в том, что анимация работает слишком быстро.Если я установлю продолжительность на 6 секунд, она будет выполняться менее чем за 1 секунду, а затем мне придется ждать еще 5 секунд для полного обратного вызова.

Вот видеозапись.Я проследил параметр «сейчас» в функции шага и время, прошедшее с момента запуска: 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();
    }
...