javascript-更改动画速度

Question

我有一段代码。 但是我的问题是..我不知道该在哪里更改动画速度。 我试图将最后一行编辑为animate（'fast'）; 但没有成功..我该怎么解决？ 我知道这主要是javascript，但到目前为止我没有找到这样的代码，它将在jquery中更好

$('#kim-jestesmy').waypoint(function(direction) {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var canvas  = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var circles = [];

createCircle(100,100,'78', function() {
    createCircle(270,100,'460', function() {
        createCircle(440,100,'20', function() {
            createCircle(610,100,'15', null);
        });
    });
});

function createCircle(x,y,text,callback) {
     var radius = 75;
     var endPercent = 101;
     var curPerc = 0;
     var counterClockwise = false;
     var circ = Math.PI * 2;
     var quart = Math.PI / 2;

     context.lineWidth = 10;
     context.strokeStyle = '#E60086';
     context.shadowOffsetX = 0;
     context.shadowOffsetY = 0;

     function doText(context,x,y,text) {
        context.lineWidth = 1;
        context.fillStyle = "#919191";
        context.lineStyle = "#919191";
        context.font      = "60px NillandBold";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(text, x, y);
     }
     function animate(current) {
         context.lineWidth = 10;
         context.clearRect(0, 0, canvas.width, canvas.height);
         context.beginPath();
         context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
         context.stroke();
         curPerc++;
         if (circles.length) {
             for (var i=0; i<circles.length; i++) {
                 context.lineWidth = 10;
                 context.beginPath();
                 context.arc(circles[i].x, circles[i].y, radius, -(quart), ((circ) * circles[i].curr) - quart, false);
                 context.stroke();
                 doText(context,circles[i].x,circles[i].y,circles[i].text);
             }
         }
         if (curPerc < endPercent) {
             requestAnimationFrame(function () {
                 animate(curPerc / 100)
             });
         }else{
             var circle = {x:x,y:y,curr:current,text:text};
             circles.push(circle);
             doText(context,x,y,text);
             if (callback) callback.call();
         }
     }

     animate();
}
});

Answer 1

由于您不限制动画的fps，因此使用此代码将尽可能快地渲染每个帧。 如果希望更快，最简单的答案是通过将curPerc变量增加一个以上来删除帧：

 function animate(current) {
     context.lineWidth = 10;
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc += 2;
     ...

上面的代码将以两倍的速度完成。 如果curPerc不能平均除100（100％curPerc！= 0），则相应地更改变量endPercent。