Javascript中的RequestAnimationFrame

Question

我想在画布中为一段圆（45度）制作动画。但由于某些原因，它不会起作用。我在这里弄错了什么？

[Demo][1]

window.onload = function() {
            (function() {
              var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
              window.requestAnimationFrame = requestAnimationFrame;
            })();
            var canvas = document.getElementById('myCanvas');
            var ctx    = canvas.getContext('2d');
            var startAngle = Math.PI * 1.5;
            var endAngle   = startAngle + 45 * (Math.PI / 180);
            var percent = 0;
            ctx.lineWidth = 10;
            ctx.strokeStyle = '#ad2323';
            function animate (cur){
                ctx.beginPath();
                ctx.arc(canvas.width / 2, canvas.height / 2, startAngle, endAngle * cur, false);
                ctx.stroke();
                ctx.closePath();
                percent++;
                requestAnimationFrame(function () {
                     animate(percent / 100)
                });
            }
};

Answer 1

怎么样：

 ctx.arc(canvas.width / 2, canvas.height / 2, startAngle, endAngle * percent, false);

不确定您是否正确使用requestAnimationFrame()的参数。

Answer 2

您的代码中有几个错误。该问题与requestAnimationFrame无关。

1. 您需要endAngle成为想要制作动画的三角形，即45度。您正在使用start + (end - start)*cur而不是end*cur的动画线性函数。
2. 您没有指定半径。
3. 您需要检查percent是否小于100。

Demo