代码之家 › 专栏 › 技术社区 › StuPointerException

简单的动画运行不顺畅

processing animation java

StuPointerException · 技术社区 · 8 年前

我有一个很简单的 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;

有办法克服吗?

1 回复 | 直到 8 年前

Kevin Workman 8 年前

值得一提的是,我看不出你在说什么口吃,但我会尽力从一般意义上帮助你。

你为什么要用一个线程来更新正在绘制的内容?

使用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库,包括处理,几乎只使用一个线程来更新和绘制。

你可能还想调查一下 delta timing ,计算自上次更新以来的时间,并根据该时间进行移动,而不是每帧移动固定距离。见 this thread 关于在处理过程中执行此操作的讨论。

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

1 年前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

1 年前

user54097 · 滚动菜单项上的导航栏动画文本徽标

2 年前

Simplicissimus · 如何使用javascript为svg转换计时

2 年前

LetsBeHappy · 高CPU的圆形渐变动画

2 年前

Toniq · css从上到中心设置动画

2 年前

Ongky Denny Wijaya · 绘制y=omega*x^2的动画,其中omega从-3到3不等

2 年前

Duck · 如何设置菜单从圆形到椭圆形的动画?

2 年前

MR Lappy · 提要动画最后出现空白

2 年前

Nithin Sai · 如何设置draggableScrollableSheet及其内容的动画?

2 年前