P5.Play通过起止帧加载动画仅识别首尾帧无法加载中间帧如何解决

该问题出现的核心原因是loadAnimation的自动序列帧匹配规则未识别到你的文件命名格式，同时当前测试代码存在精灵重复创建的逻辑错误。

方案1：补全序列帧配置（适配自动匹配规则） #

p5.play自动识别连续序列帧时，需要明确告知文件名的补零位数、前缀等规则，否则会默认仅加载传入的首尾两帧，正确写法如下：

function preload() {
  chargeExplosion = loadAnimation(
    'assets/chargeExplosion/frame0000.png',
    'assets/chargeExplosion/frame0081.png',
    {
      leadingZero: 4, // 匹配文件名中4位补零的数字部分
      frameName: 'frame' // 匹配文件名前缀
    }
  );
}

注意事项：

• 提前确认assets/chargeExplosion路径下从frame0000.png到frame0081.png所有帧无缺失、命名格式完全一致
• leadingZero参数值需和文件名中数字部分的位数完全匹配

方案2：批量生成帧路径（兼容性最高，无版本适配问题） #

如果不想受p5.play版本、自动匹配规则的限制，可以通过循环批量生成所有帧的路径，直接传入loadAnimation方法，无需逐帧手动编写路径：

function preload() {
  const framePaths = []
  // 循环生成0到81共82帧的路径
  for(let i = 0; i <= 81; i++) {
    // padStart(4, '0') 自动将数字补为4位，如1转为0001、10转为0010
    framePaths.push(`assets/chargeExplosion/frame${i.toString().padStart(4, '0')}.png`)
  }
  // 把路径数组展开传入loadAnimation
  chargeExplosion = loadAnimation(...framePaths)
}

额外逻辑修正 #

当前测试代码将createSprite和addAnimation写在了draw函数中，而draw函数每秒执行60次，会导致每秒重复生成60个精灵，引发性能问题和动画异常，需将精灵创建逻辑移至setup函数中，draw函数仅保留画面渲染逻辑，完整参考代码如下：

let chargeExplosion
let explosion1

function preload() {
  const framePaths = []
  for(let i = 0; i <= 81; i++) {
    framePaths.push(`assets/chargeExplosion/frame${i.toString().padStart(4, '0')}.png`)
  }
  chargeExplosion = loadAnimation(...framePaths)
}

function setup() {
  createCanvas(500, 500)
  // 精灵仅需创建一次，放在setup中
  explosion1 = createSprite(width / 2, height / 2, 40, 40)
  explosion1.addAnimation('boom', chargeExplosion)
}

function draw() {
  background(220)
  // 绘制所有精灵
  drawSprites()
}

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