javascript-改变动画的速度

我有一段代码。但我的问题是。。我不知道在哪里可以更改动画速度。我试图将最后一行编辑成动画（“快速”）；但是如果没有成功，我怎么解决呢？ 我知道它主要是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();
}
});

$（'kim jestesmy'）。航路点（功能（方向）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var循环=[]；
createCircle（100100，'78'，函数（）{
createCircle（270100，'460'，函数（）{
createCircle（440100，'20'，函数（）{
createCircle（610100，'15'，空）；
});
});
});
函数createCircle（x、y、文本、回调）{
var半径=75；
var endPercent=101；
var-curPerc=0；
var逆时针=假；
var circ=Math.PI*2；
var quart=Math.PI/2；
context.lineWidth=10；
context.strokeStyle='#E60086'；
context.shadowOffsetX=0；
context.shadowOffsetY=0；
函数doText（上下文、x、y、文本）{
context.lineWidth=1；
context.fillStyle=“#919191”；
context.lineStyle=“#9191”；
context.font=“60px NillandBold”；
context.textAlign=“中心”；
context.textb基线=“中间”；
填充文本（文本，x，y）；
}
函数动画（当前）{
context.lineWidth=10；
clearRect（0，0，canvas.width，canvas.height）；
context.beginPath（）；
弧（x，y，半径，-（夸脱），（（圈）*当前）-夸脱，假）；
stroke（）；
curPerc++；
if（圆圈长度）{
对于（var i=0；i，由于您没有限制动画的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