如何从我的 draw() 函数中为线条设置动画

Question

我正在使用处理来创建允许用户将网络组件连接在一起的学习体验项目。我有使用标准线路的链接，但如果有有效的连接，我希望能够显示通过该线路移动的信号。例如，将线路视为网络电缆。无论如何我可以为这条线制作动画吗？

  void draw(){
   pushStyle();
   stroke(0);
   line(from.x, from.y, to.x, to.y);
   popStyle();
 }
} //draw function in the 'link' file

Answer 1

当然可以，但你的问题有点宽泛。您确实想到了一种特定类型的动画？无限可能;)

在处理中处理这样的事情的基本方法是每帧增加一些动画变量（或使用时间管理 - 尽管这超出了基础知识）。
由于动画变量（例如位置或颜色）每帧都会更改，因此动画每帧都不同。它是动画的。

下面我举一个小绿线在黑色"连接"线上行进的例子。如果你通读代码，我想你会弄清楚的。这应该合并到一个很好的"连接"类中，以便于在更大范围内使用。

//set coordinates for connection-line
int fromX = 100;
int toX = 600;
int fromY = 100;
int toY = 200;
//copy start coordinate for animation
int animx = fromX;
int animy = fromY;
//determine animation stepsize
int stepX = (toX-fromX)/10;
int stepY = (toY-fromY)/10;
void setup() {
  size(800, 300);
  //set framerate so animation is not to fast
  frameRate(5);
  //draw thick lines
  strokeWeight(10);
}
void draw() {
  background(255);
  // draw connection in black
  stroke(0);
  line(fromX, fromY, toX, toY);
  //draw animation in green
  stroke(0, 255, 0);
  line(animx, animy, animx+stepX, animy+stepY);
  // step animation for next frame
  animx = animx+stepX;
  animy = animy+stepY;
  // check for reset (if the animation on the next frame is drawn outside the line)
  if (animx+stepX > toX)
  {
    animx = fromX;
  }
  if (animy+stepY > toY)
  {
    animy = fromY;
  }
}