我的requestAnimationFrame（）动画感觉有点卡顿？

Question

这意味着要在移动设备上播放。但由于某些原因，这个动画并不那么快，感觉就像它的口吃或“落后”＃34;有时。有什么理由吗？我的完整代码在这里：https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

下面的这个功能是我的动画，它的使用速度非常快。

function turnEvent(AnX, AnY) {
    var lengd = rects.length;
    eventDone = false,
    one30 = 9,
    one40 = 8,  
    one301 = false, 
    one401 = false;
    for (var i = 0; i < lengd; i += 1) {
        // Indentifying rectangle in use, so we can access the color, and position.
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        ctx.beginPath();
        ctx.fillStyle = rightBox.color;
        ctx.moveTo((rectangle.x + 43 - one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.lineTo((rectangle.x + 50 + one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 33 - one30) * Yf, (rectangle.x + 58 + one30) * Xf, (rectangle.y + 43 - one40) * Yf);
        ctx.lineTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 70 + one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 50 + one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.lineTo((rectangle.x + 43 - one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 33 - one30) * Xf, (rectangle.y + 70 + one40) * Yf);
        ctx.lineTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 43 - one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 33 - one30) * Xf, (rectangle.y + 33 - one30) * Yf, (rectangle.x + 43 - one40) * Xf, (rectangle.y + 33 - one30) * Yf);
        ctx.fill();
        ctx.closePath();
        if (one30 === 30) {
            one301 = true;
        } else {
            one30 += 3;
        }
        if (one40 === 40) {
            one401 = true;
        } else {
            one40 += 2;
        }
        if (one301 && one401) {
            eventDone = true;
        }
    }
    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                window.setTimeout(callback, 1000 / 60);
                };
    })();
    (function animloop(){
        if (eventDone) {//condition to stop requestAnimationFrame();
            eventDone = false;
            rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, rightBox.color, 'black');
            return;
        };
        requestAnimFrame(animloop);
        render();
    })();
}