javascript -动画的变化速度

Question

我有一段代码。但我的问题是..。我不知道我能在哪里改变动画速度。我试着把最后一行编辑成动画(‘fast’)，但是没有success..how，我能解决它吗？我知道这是，但到目前为止，我还没有找到更好的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。