2

这就是我正在做的事情。如果您滚动到 JS 第 63 行，您将看到我遇到困难的功能。我正在尝试用 requestAnimationFrame 替换我的 setInterval 代码（在注释中）。但是动画似乎很慢，而且，它永远不会停止！这是带有 setInterval 的工作版本。

相关JS：

function setGauge(val){
    var time = 350;
    time = time / (Math.abs(val - preVal));

    if (val > preVal) {
        function getHigher(){
           if (preVal == val)
                cancelAnimationFrame(animate);
            preVal++;
            drawValueArc(preVal);
            var animate = requestAnimationFrame(getHigher);
        }
        getHigher();
        /*
        var animate = setInterval(function(){
            if (preVal == val)
                clearInterval(animate);
            preVal++;
            drawValueArc(preVal);  
        }, time);
        */
    } else if (val < preVal) {
        function getLower(){
           if (preVal == val)
                cancelAnimationFrame(animate2);
            preVal--;
            drawValueArc(preVal);  
            var animate2 = requestAnimationFrame(getLower);
        }
        getLower();
        /*
        var animate2 = setInterval(function(){
            if (preVal == val)
                clearInterval(animate2);
            preVal--;
            drawValueArc(preVal);  
        }, time);
        */
    } 
}
4

1 回答 1

3

我只是稍微修改了代码，你几乎在那里。

animate和并不是真正需要的animate2，因为我们没有取消 requestAnimationFrame (rAF)，而只是检查它的运行条件是否存在：

function setGauge(val) {
    var time = 350;
    time = time / (Math.abs(val - preVal));

    if (val > preVal) {
        function getHigher() {
            preVal++;
            drawValueArc(preVal);

            //if still less then rAF again
            if (preVal < val) requestAnimationFrame(getHigher);
        }
        getHigher();

    } else if (val < preVal) {
        function getLower() {
            preVal--;
            drawValueArc(preVal);

            //if still more then rAF again
            if (preVal > val) requestAnimationFrame(getLower);
        }
        getLower();

     //...
}

在此处查看修改后的小提琴（链接似乎：

http://jsfiddle.net/AbdiasSoftware/cUSBQ/11/

于 2013-07-05T21:54:24.320 回答