如何在处理中创建"脉冲"效果？

Question

我正在尝试在屏幕上绘制的图形上逐个显示点。

理想情况下，首先绘制一个小椭圆，然后，一个"环"将从椭圆的中心向外移动，并在移动时逐渐消失。初始椭圆将保留在最初绘制的位置。

我可以编写一个简单的渐变椭圆，但无法弄清楚如何设置移动环的动画。有人能分享一些关于如何开始这项工作的想法吗？

Answer 1

基本上，您需要将动画的状态存储在一组变量中。使用这些变量绘制每一帧，并随着时间的推移更改这些变量以更改绘制的内容。

因此，第一步是找出需要存储的状态。这将告诉你需要跟踪哪些变量。作为一个非常简单的例子，您可以存储直径和不透明度：

float diameter = 10;
float opacity = 255;

第二步是使用这些变量绘制每一帧。一次只担心一帧，在这种情况下，我们可能只清除旧帧，然后画一个圆圈：

background(0);
noFill();
stroke(255, 255, 255, opacity);
ellipse(width/2, height/2, diameter, diameter);

最后，最后一步是随着时间的推移改变这些变量。我们可以通过修改它们的值来实现这一点，使圆圈变得更大，颜色变得不那么不透明：

diameter++;
opacity--;

把它们放在一起，看起来是这样的：

float diameter = 10;
float opacity = 255;
void setup(){
size(500, 500);
}
void draw(){
diameter++;
opacity--;
background(0);
noFill();
stroke(255, 255, 255, opacity);
ellipse(width/2, height/2, diameter, diameter);
}

请注意，这只是一个例子，您必须将这些步骤与您自己的状态和变量一起应用，才能达到您想要的效果。

Stack Overflow实际上并不是为一般的"我该怎么做"类型的问题而设计的。试着问更具体的"我试过X，期望是Y，但得到了Z"类型的问题。换言之，尝试一些东西，如果你遇到困难，可以发布MCVE。祝你好运