如何在不降低Canvas全局帧率前提下减慢JavaScript单个Sprite动画速度

云上老周

2026-10-5

解决方案

核心思路是给单个精灵实例单独维护帧计数逻辑，不修改全局requestAnimationFrame的运行速率，既可以独立控制单个精灵的动画速度，也不会影响画布内其他元素的流畅度。

具体修改步骤

给Atom类新增帧计数、帧间隔两个属性，帧间隔数值越大，精灵动画速度越慢：

class Atom {
  constructor(options){
    this.width= 320;
    this.height= 320;
    this.frameX= 0;
    this.frameY= 0;
    this.pos= options.pos;
    this.game= options.game;
    this.img= new Image();
    this.img.src = "sprite.png"
    // 新增动画控制属性
    this.frameCount = 0;
    // 可根据自己需要调整数值，也可以做成从options传入，实现不同精灵用不同动画速度
    this.frameInterval = 3; 
    this.img.onload = () => this.draw()
  }

修改draw方法的帧切换逻辑，只有计数达到间隔阈值时才切换精灵帧：

draw(ctx){
    drawSprite(this.img, this.width * this.frameX, this.height * this.frameY, this.width, this.height,this.pos[0], this.pos[1], this.width, this.height);
    // 先累加计数
    this.frameCount++;
    // 达到阈值才切换帧
    if (this.frameCount >= this.frameInterval) {
      this.frameCount = 0;
      if (this.frameX < 20 ) {
        this.frameX++;
      } else {
        this.frameX= 0;
      }
    }
  }
}