简单动画运行不流畅答案

【问题标题】：Simple animation is not running smoothly简单动画运行不流畅
【发布时间】：2018-07-31 16:22:34
【问题描述】：

我有一个非常简单的Processing 应用程序来在屏幕上移动一个矩形：

void setup() {
    size(800,600);
    thread("updateState");
    frameRate(100);
}

void draw() {
    background(#FFFFFF);
    rect(800f - position, 300f, 50f,30f);
}

float position = 0;
void updateState() {
  while(true) {
      position  = position < 850f ? position + 1f : 0f;
      delay(10);
  }
}

如果我一次将对象移动 1 个像素，它会非常平滑，我理解这是因为更新线程或多或少与帧速率同步，因此几乎没有卡顿。但是，将速度提高到 4 像素并不是很流畅：

position  = position < 850f ? position + 4f : 0f;

有没有办法克服这个问题？

【问题讨论】：

我不清楚你使用的是哪个java动画框架。
它叫做processing (processing.org)。他们选择了一个动词作为他们的名字很痛苦，这使得在一个句子中很难清楚地使用！
你画得怎么样？在哪里？您可能需要创建一个“渲染循环”。
我不知道处理。我认为您需要“按时间”添加像素。您将需要知道从上次渲染/更新到现在已经过去了多少时间......并将其乘以速度（例如像素/秒）。如果你像你一样添加 N 个像素......我认为这不会很顺利。也许你可以访问那个时间/延迟并乘以那个……不知何故。只是一个想法。
减少延迟会产生所需的效果，但不会准确，你的 1px 不会在 100fps (1000ms/10delay)，你必须在 while 上跟踪循环之间的时间并划分你的速度以秒为单位。

标签： java animation processing

【解决方案1】：

我没有看到你所说的口吃，但我会尽力提供一般意义上的帮助。

你为什么要使用线程来更新正在绘制的东西？

不要使用自己的更新循环，而是使用 Processing 的 draw() 函数，该函数已经每秒调用 60 次。

float position = 0;

void setup() {
  size(800, 600);
  frameRate(100);
}

void draw() {

  position  = position < 850f ? position + 4f : 0f;

  background(#FFFFFF);
  rect(800f - position, 300f, 50f, 30f);
}

如果您出于某种原因绝对必须使用线程，那么您需要考虑concurrency。基本上，您需要考虑如果您的更新线程使用它更改绘图线程中间的position 变量会发生什么。这些问题可能会导致口吃和tearing。这就是为什么大多数 UI 库，包括 Processing，几乎只使用一个线程来更新和绘制。

您可能还想查看delta timing，您可以在其中计算自上次更新以来的时间，并将您的移动基于该时间，而不是每帧移动固定距离。请参阅 this thread，了解有关在处理中执行此操作的讨论。

【讨论】：

谢谢，删除线程肯定有帮助，在这种情况下，我明白为什么它是不可取的。基于 cmets （和你的回答），我添加了粗增量时间和速度，现在好多了。我的动画之旅还在继续:)