Question

我试图使屏幕上出现许多随机斑点，然后通过spot.x ++对其进行动画处理；。为什么在循环结束后不my code设置动画，并且在循环结束后如何使代码动画化？

Answer 1

您需要为要绘制的每个圆创建一个点对象。数组非常适合存储此类内容。
然后，每个绘制循环都必须增加这些点中的每个点，然后重新绘制每个圆。

让我们逐步完成代码：
（为简单起见，我假设您是绘制2个圆而不是36个圆。）

spot从x = 50和y = 50的单个数据对象开始。

您在spot的坐标（50，50）处画了一个圆。那个圆圈在那里。
然后您将spot中的值随机化，所以现在它可能是x = 231.3，y = 4.2，并在这些坐标处绘制一个新圆。该圆圈已在此处绘制，并将留在那里。

现在，您取spot，它仍然只是其中带有随机坐标的单个数据对象，然后将x递增。 spot.x变为232.3、233.3、234.3 ...，但是您永远不会调用代码来重画圆圈。

即使您已在spot的新坐标处再次绘制一个圆，它也不会影响您在50、50处的原始圆。

（如果将console.log(spot);行添加到draw()函数中，您将会明白我的意思。）

Answer 2

是的，韦斯洛德（Wes Lord）的好建议。您正在创建斑点，但不存储它们。如果您为斑点创建阵列，则可以开始对其进行动画处理。

这是对代码的非常简单的修改，但是应该执行您尝试做的事情。

var spots = []; // array of spots

var col = {
  r: 200,
  g: 5,
  b: 100,
  a: 180
}

function setup() {
  createCanvas(400, 400);

// Create spots
  for (var i=0; i<50; i++) {
    spots.push(new Spot());
  }
}

function draw() {
  background(220);
  noStroke();
  for (var i=0; i<spots.length; i++) {
    spots[i].move();
    spots[i].display();
  }
}

// Spot class
function Spot() {
  this.x = random(width);
  this.y = random(height);
  this.g = random(5, 255);
  this.a = random(150, 180);
  this.diameter = 20;

  this.move = function() {
    this.x += 1;
  };

  this.display = function() {
    fill(col.r, col.g, col.b, col.a);   
    col.r = this.x / 1.5 + 100;
    col.g = this.g;
    col.b = this.y;
    col.a = this.a;
    ellipse(this.x, this.y, this.diameter, this.diameter);
  };
}

当绘制循环结束时如何为圆形设置动画

2 个答案: