为什么我的 For() 循环动画不起作用？

Question

我编写了一个简单的射击模拟器，它可以将鼠标变成十字准线，并在单击时为子弹设置动画。我想创建一个动画，放大十字线，然后在发射子弹时使其再次变小。我用的是一张有十种不同尺寸的单子。这是我最好的尝试：

var imgConst = 100;
var imgSize = imgConst;
var imgChange = [4, (6 + 2/3), 10, -10, -10, -10, -10, -20, (-33 - 1/3), -50];
for(var i = 0; i < imgChange.length; i++) {
imgChange[i] = imgSize + imgConst/imgChange[i];
imgSize = imgChange[i];
}

我没有硬编码数字，因为我最终想让十字线取决于窗口大小。我使用了for循环来避免编写重复的代码。imgConst是十字线通常应该是什么大小，imgSize直接影响十字线，imgChange存储动画应该是的值。以下是我执行动画的代码：

for(var i = 0; i < imgChange.length * 1; i ++) {
imgSize = imgChange[floor(i)]
}

问题是，这根本不起作用。我知道它运行得很快，所以我决定将帧速率限制在10，看看它是否有效，但仍然什么都没发生。至于放慢它的速度，我已经尝试过使for((循环增加0.1，并且大小变为imgChange[Math.floor(i)]。所以，我想我要问两个问题：首先我如何使动画工作，以及一旦动画工作，我如何减慢它的速度？

Answer 1

@Charlie Wallace说了什么；这是draw函数中的循环吗？当它是，它可能工作。但是，在绘制到画布之前循环所有更改，只显示最后一次更改。

你可以做这样的事。每帧更新一次更改。而不是整个范围。

var imgConst = 100;
var imgSize = imgConst;
var imgChange = [4, (6 + 2/3), 10, -10, -10, -10, -10, -20, (-33 - 1/3), -50];
var changeIdx = 0;
function draw(){
imgChange[ changeIdx ] = imgSize + imgConst/imgChange[ changeIdx ];
imgSize = imgChange[ changeIdx ];
changeIdx += 1;
}