Javascript 在画布中逐步绘制线条动画

因此，我想使用requestAnimationFrame在HTML5画布上绘制一条线的动画

我已经做到了

function animateWrapper(centerX, centerY, xAngle, yAngle, width, height) {
    var request = requestAnimationFrame(animate);
    var canvas = document.getElementById("drawing");
    var context = canvas.getContext('2d');  
    function animate (centerX, centerY, xAngle, width, height) {
        drawLine(centerX,centerY, centerX, centerY - height, context, request);
    }
}

function drawLine(startX, startY, endX, endY, context, request) {
    context.beginPath();
    context.moveTo(startX, startY);
    step += 0.05;
    // if (step > 1) step = 1;
    var newX = startX + (endX - startX) * step;
    var newY = startY + (endY - startY) * step;
    context.lineTo(newX, newY);
    context.stroke();
    if (Math.abs(newX) >= Math.abs(endX) && Math.abs(newY) >= Math.abs(endY)) {
        cancelAnimationFrame(request);
        step = 0;
    }
}

$(document).ready(function(){
    animateWrapper(100, 100, 40, 40, 400, 400);
});

现在centerY、xAngle、width和height都是未定义的（这是有道理的，它们没有被传入）。这将导致endY变为NaN，因此动画不会出现

我不确定如何修复此问题-如何在请求动画帧中传递这些参数？

这应该可以：

function animateWrapper(centerX, centerY, xAngle, yAngle, width, height) {
    function animate () {
        drawLine(centerX,centerY, centerX, centerY - height, context, request);
    }

    var request = requestAnimationFrame(animate);
    var canvas = document.getElementById("drawing");
    var context = canvas.getContext('2d');  
}

您不必使用任何参数调用

animate（）

，因为变量

centerX

，

centerY

。。。当定义了

animate（）

时，

height

在范围内（即，它们在当时是已知的，因此您可以在函数内部简单地使用它们）

---

这个问题的答案列出了各种变量在JavaScript中可见/可用的方式：

代码中有一个问题：不会出现动画，因为您只调用一次requestAnimationFrame（rAF）。您可以将rAF视为下一次屏幕可用时触发的setTimeout，而不是每次都会反复调用的setInterval

第二个问题是经典的javascript闭包/绑定/范围问题。
因此，第一个解决方案是切换到更现代的语言，如google Dart（：-）。
另一种解决方案是，例如，将动画功能与其参数绑定。
在javascript中，如果您需要：

var myBoundFunction = someFunction.bind(null, arg1, arg2, arg3);

后来，我打电话来

myBoundFunction();

将具有与调用相同的效果：

someFunction(arg1, arg2, arg3);

请在此处查看更多详细信息，以及第一个参数的用法：

我可以给你一个关于如何更改代码的提示，但无论如何，我想你会想设置几行动画，所以你必须更改它的工作方式，使其更灵活。
我强烈建议您使用对象并将线定义为具有（x，y，…）和绘制和更新方法的对象

类似于（这次使用闭包）：

（（如果您感兴趣，下面是我使用的动画循环：
我的基地在摆弄一堆小设施

---

))

啊，我明白了，所以我尝试了这个，但它不会循环-为什么？你只需要一次动画，它不会要求任何东西。请删除另一个问题，这是噪音。希望我的答案能引导您找到您所寻求的解决方案。因此requestAnimationFrame必须使用递归函数？从技术上讲，它不是递归函数，但您必须执行以下操作：函数doThing（）{callAgainLater（doThing）；…做一些事情…；}

var canvas   = ... ;    // do the DOM access only once
var context  = ... ;   // do the DOM accessd only once      
var myObjectsToDraw = [];

function animate() {
       ... return and stop animation if some condition is met ...
       requestAnimationFrame(animate);
       ... clear screen ..
       // draw all objects
       for (var i in myObjectsToDraw) myObjectsToDraw[i].draw();
       // update all objects
       for (var i in myObjectsToDraw) myObjectsToDraw[i].update();
}

myObjectsToDraw.push ( ... some object ... );
animate();