2

これは私が取り組んでいるものです。JS の 63 行目までスクロールすると、私が苦労している関数が表示されます。setInterval コード (コメント内) を requestAnimationFrame に置き換えようとしています。しかし、アニメーションはかなりゆっくり進んでいるように見えます。また、停止することはありません!! これは 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

私はコードをわずかに変更しました。あなたはほとんどそこにいます。

requestAnimationFrame (rAF) をキャンセルせず、実行する条件が存在するかどうかを確認するだけなので、animateandanimate2は実際には必要ありません。

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 に答える