0

我有一段代码。但我的问题是..我不知道在哪里可以改变动画速度。我试图将最后一行编辑为 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();
}
});
4

1 回答 1

0

由于您没有限制动画的 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。

于 2013-11-06T20:53:51.483 回答