Processing(Java)如何不调整全局帧率单独减慢精灵动画速度

问题描述 #

调整Processing精灵动画示例的播放速度时，无法直接修改全局framerate参数——该参数会影响画布上所有元素的运行效果，我仅需要将单个精灵动画的播放速率设置为5FPS，其余元素保持原有全局60FPS的运行速度。

原有Animation类代码 #

class Animation {
  PImage[] images;
  int imageCount;
  int frame;
  
  Animation(String imagePrefix, int count) {
    imageCount = count;
    images = new PImage[imageCount];

    for (int i = 0; i < imageCount; i++) {
      String filename = "images/" + imagePrefix + nf(i, 2) + ".png";
      images[i] = loadImage(filename);
    }
  }

  void display(float xpos, float ypos) {
    frame = (frame+1) % imageCount;
    image(images[frame], xpos, ypos);
  }
  
  int getWidth() {
    return images[0].width;
  }
}

失效的尝试方案 #

曾通过全局帧计数取模的方式控制动画显示：

if (frameCount % 10 == 1) {
 // 显示动画帧
}

该方案存在严重闪烁问题：仅每10帧才渲染一次动画内容，其余时间动画位置无绘制内容，无法实现流畅的慢速播放效果。

效果参考 #

• 当前过快的运行效果：
  
• 期望实现的慢速播放效果：
  

解决方案 #

闪烁的根本原因是绘制逻辑错误：上述取模方案仅在满足计数条件时才绘制动画帧，不满足条件时完全跳过动画绘制，自然会出现闪烁。正确实现逻辑为每帧都持续绘制当前持有的动画帧，仅按设定的时间间隔切换要显示的帧索引，即可实现独立于全局帧率的动画速率控制，无任何闪烁问题。

实现步骤 #

• 为Animation类新增速率控制属性：目标播放帧率、上一次切帧的时间戳、单帧停留时长（根据目标帧率计算）
• 修改display()方法逻辑：每次调用时先判断当前时间与上一次切帧的时间差是否达到单帧停留时长，达到则切换到下一帧并更新时间戳；无论是否完成切帧，都执行当前帧的绘制操作

修改后可直接使用的Animation类代码 #

class Animation {
  PImage[] images;
  int imageCount;
  int frame;
  // 速率控制参数
  float targetFps;
  int lastFrameTime;
  int frameInterval;

  /**
   * 构造函数
   * @param imagePrefix 精灵图文件名前缀
   * @param count 动画总帧数
   * @param animationFps 该动画独立的目标播放帧率
   */
  Animation(String imagePrefix, int count, float animationFps) {
    imageCount = count;
    images = new PImage[imageCount];
    // 初始化速率参数
    targetFps = animationFps;
    frameInterval = int(1000 / targetFps); // 计算单帧停留的毫秒数
    lastFrameTime = millis();

    for (int i = 0; i < imageCount; i++) {
      String filename = "images/" + imagePrefix + nf(i, 2) + ".png";
      images[i] = loadImage(filename);
    }
  }

  void display(float xpos, float ypos) {
    // 达到切帧间隔才更新帧索引
    if (millis() - lastFrameTime >= frameInterval) {
      frame = (frame+1) % imageCount;
      lastFrameTime = millis();
    }
    // 每帧都绘制当前动画帧，从根源避免闪烁
    image(images[frame], xpos, ypos);
  }
  
  int getWidth() {
    return images[0].width;
  }
}

调用示例 #

初始化动画实例时，传入需要的独立播放帧率即可，例如实现5FPS播放：

// 示例：精灵图前缀为"run"，共16帧，播放速率设为5FPS
Animation runAnim = new Animation("run", 16, 5);

该实现基于Processing内置的millis()时间戳做切帧判断，不受全局帧率波动影响，动画播放速度稳定，且完全不会干扰画布上其他元素的运行逻辑。如果需要动态调整播放速度，可在类中新增setFps(float newFps)方法，实时更新frameInterval参数即可。

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