动画圆以跨线移动答案

【问题标题】：Animating Circle to Move Across Line动画圆以跨线移动
【发布时间】：2016-04-01 04:21:41
【问题描述】：

我正在使用 lerp() 函数将我的圆圈移过一条线，但它不起作用。根据我的 amt 参数用于 lerp() 函数，圆圈总是在某处结束。如果我为 amt 设置 0.5，那么圆圈将放置在线的一半，但我看不到它移动，圆圈也没有完成沿着圆圈的长度向下移动。那么谁能帮我把圆圈往下移？

float x1,y1,x2,y2;
float cx,cy;
float x4,y4;

void setup() {
  size(600,600);
  x1 = 200;
  y1 = 150;
  x2 = 300;
  y2 = 250;
  cx = 450;
  cy = 200;
}

void draw() { 
  background(60);
  stroke(220);
  line(x1,y1,x2,y2);
  noFill();
  noStroke();
  // calculate the point
  float k = ((y2-y1) * (cx-x1) - (x2-x1) * (cy-y1))
   / ((y2-y1)*(y2-y1) + (x2-x1)*(x2-x1));
  float x4 = cx - k * (y2-y1);
  float y4 = cy + k * (x2-x1);
  stroke(0);
  line(cx,cy,x4,y4); //line connecting circle and point on line

  float x = lerp(cx, x4, .1);
  float y = lerp(cy, y4, .1);

  fill(255, 0, 175);
  ellipse(x4,y4, 8,8);

  fill(175, 0, 255);
  ellipse(x, y, 50, 50);
}

【问题讨论】：

我不确定是否理解您的问题，但您想沿黑线为圆圈设置动画是对的吗？如果是这样，您必须更改绘图函数中 amt 参数的值。只需使用一个变量，每次迭代都会递增。
谢谢！我让它工作了！

标签： java animation processing lerp

【解决方案1】：

您需要为传递给lerp() 函数的amount 值使用一个变量。然后随着时间的推移增加该变量以进行动画处理：

float amount = 0;
float speed = .001;

void setup() {
  size(500, 500);
}

void draw() {

  float startX = 0;
  float startY = 0;
  float endX = width;
  float endY = height;
  float currentX = lerp(startX, endX, amount);
  float currentY = lerp(startY, endY, amount);

  background(0);
  ellipse(currentX, currentY, 20, 20);

  amount += speed;

}

【讨论】：