处理绘制方法慢？

Question

我正在研究处理语言，并有这样的代码：

int fatness=30;
int step=20;

void drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - fatness, height - fatness, fatness, fatness);   
}

void increaseCircle(){
 fatness = fatness + step;  
}

在另一个类中，我想调用 increaseCircle() 方法。但我希望它慢慢变大。我的意思是，在我的代码中，step 使其变大 20 倍，但我希望它变大，即如果可能的话，在 2 秒内使用动画。我怎样才能做到这一点？

编辑：当我从该类定义一个对象并调用increaseCircle方法时，它会变得越来越大，不会停止吗？

Answer 1

听起来您需要根据时间更新值。

如果您存储开始时间，则可以随时使用 millis() 函数检查经过了多少时间。

一旦您知道过去了多少时间，您可以将该差异除以您想要更新变量的持续时间（在您的情况下为肥胖）。

这将为您提供 0.0 到 1.0 之间的值，您可以使用该值缩放/乘以变量的最终所需值（例如，肥胖度从 20 到 200）。

我的意思是：

int startTime;
int duration = 1000;
float startValue = 20;
float endValue = 200;
float currentValue = startValue;

void setup(){
  size(400,400,P2D);
  ellipseMode(CENTER);
  startTime = millis();
}
void draw(){
  background(255);
  increaseCircle();
  drawCircle();
}
void drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - currentValue, height - currentValue, currentValue, currentValue);
}

void increaseCircle(){
  float progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now
  if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration
}
void mousePressed(){//reset value and time
  currentValue = startValue;
  startTime = millis();
}
void keyPressed(){//update duration
  if(key == '-') if(duration > 0) duration -= 100;
  if(key == '=' || key == '+') duration += 100;
  println("duration: " + duration);
}

在这个简单的演示中，您可以单击以重置动画并使用 - 和 = 键来增加或减少动画持续时间。

如果您习惯在Processing中使用外部库，您应该看看这个库 。

您可以运行以下演示：

var startTime;
var duration = 1000;
var startValue = 20;
var endValue = 200;
var currentValue = startValue;

function setup(){
  createCanvas(400,400);
  ellipseMode(CENTER);
  startTime = millis();
}
function draw(){
  background(255);
  increaseCircle();
  drawCircle();
}
function drawCircle() {  
 fill(48, 139, 206);
 ellipse(width - currentValue, height - currentValue, currentValue, currentValue);
}

function increaseCircle(){
  var progress = (float)(millis()-startTime)/duration;//millis()-startTime = difference in time from start until now
  if(progress <= 1.0) currentValue = startValue + (endValue * progress);//the current value is the final value scaled/multiplied by the ratio between the current duration of the update and the total duration
}
function mousePressed(){//reset value and time
  currentValue = startValue;
  startTime = millis();
}
function keyPressed(){//update duration
  if(key == '-') if(duration > 0) duration -= 100;
  if(key == '=' || key == '+') duration += 100;
  println("duration: " + duration);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>