Processing实现多图像错峰交叉淡入淡出效果的技术咨询

现有代码所有动画同步启动的核心问题有两点：

• 每个Pic实例的透明度计数器f都从0同步累加，没有设置启动时间差
• 计数逻辑和需求时长不匹配：Processing默认帧率60fps，15秒全周期对应900帧，原代码计数到555就反转，既不符合时长要求，透明度值也超出了0-255的有效范围。

按照需求做如下调整：

• 统一用全局帧计数作为时间基准，给每个图片实例分配独立的启动偏移量，相邻实例偏移1秒对应的帧数（60帧），实现错峰启动
• 单张图片的15秒周期平分为两段：前7.5秒淡入（透明度从0线性升到255），后7.5秒淡出（透明度从255线性降到0）
• 15张图片按1秒间隔依次启动，屏幕上会始终保持15张处于不同透明度阶段的图片，动画自动循环
• 修正原代码透明度溢出、tint状态污染全局的问题

修正后可直接运行的代码如下：

PImage[] imgs = new PImage[42];
Pic[] pics = new Pic[15];
// 全局参数，直接对应需求可自由调整
int FPS = 60;
int CYCLE_DURATION = 15; // 单张图淡入淡出全周期，单位：秒
int INTERVAL = 1; // 相邻图片启动间隔，单位：秒
int totalCycleFrames = CYCLE_DURATION * FPS;
int intervalFrames = INTERVAL * FPS;

void setup() {
  size(1000, 880);
  frameRate(FPS);
  // 预加载所有素材
  for (int i = 0; i < imgs.length; i++) {
    imgs[i] = loadImage(i+".png");
  }
  // 初始化图片实例，逐张分配启动偏移量
  for (int i = 0; i < pics.length; i++) {
    pics[i] = new Pic(
      int(random(0, 29)), 
      random(0, 800), 
      random(0, height),
      i * intervalFrames
    );
  }
}

void draw() {
  background(255);
  for (int i = 0; i < pics.length; i++) {
    pics[i].display();
  }
}

class Pic {
  float x;
  float y;
  int num;
  int startOffset; // 错峰启动的核心偏移参数

  Pic(int tempNum, float tempX, float tempY, int tempOffset) {
    num = tempNum;
    x = tempX;
    y = tempY;
    startOffset = tempOffset;
  }

  void display() {
    imageMode(CENTER);
    // 计算当前实例相对于自身启动点的已过帧数，取模实现循环播放
    int elapsed = (frameCount - startOffset) % totalCycleFrames;
    // 未到启动时间的实例不绘制
    if (elapsed < 0) {
      return;
    }
    float alpha;
    int halfCycle = totalCycleFrames / 2;
    if (elapsed < halfCycle) {
      // 淡入阶段：透明度从0升到255
      alpha = map(elapsed, 0, halfCycle, 0, 255);
    } else {
      // 淡出阶段：透明度从255降到0
      alpha = map(elapsed, halfCycle, totalCycleFrames, 255, 0);
    }
    // 如需保留原代码的蓝调染色效果，替换为 tint(0, 153, 204, alpha);
    tint(255, alpha);
    image(imgs[num], x, y);
    noTint(); // 重置tint状态避免影响其他元素绘制
  }
}

• 调整顶部CYCLE_DURATION、INTERVAL参数即可直接修改单张动画时长、图片启动间隔，不需要改动内部逻辑
• 如果需要图片随机替换而非固定位置/素材，可以在每个实例完成一个完整淡入淡出周期后，重新随机赋值num、x、y属性即可

内容的提问来源于stack exchange，提问作者user2449986