SpriteAnimation类中如何获取imageIndex的实时值？

常见原因及对应解决方案 #

1. 私有属性访问错误 #

如果imageIndex是类的私有属性（定义为#imageIndex），你之前写的getImageIndex访问的是公共属性this.imageIndex，而非私有属性，所以返回初始值0。

修正getter方法，直接访问私有属性：

class SpriteAnimation {
  #imageIndex = 0;
  // ...其他私有属性和方法

  getImageIndex() {
    return this.#imageIndex; // 用#前缀访问私有属性
  }

  #setImageIndex() {
    this.#imageIndex = (this.#imageIndex + 1) % this.#totalFrames;
  }
}

2. this上下文绑定错误 #

如果#setImageIndex的调用上下文不对，会导致更新的不是当前实例的#imageIndex。比如在定时器、requestAnimationFrame中调用时，this可能指向全局对象而非类实例。

确保调用#setImageIndex时this指向正确：

class SpriteAnimation {
  // ...其他代码

  startAnimation() {
    // 使用箭头函数绑定上下文
    requestAnimationFrame(() => this.#animateLoop());
  }

  #animateLoop() {
    this.#setImageIndex();
    // 其他动画逻辑
    requestAnimationFrame(() => this.#animateLoop());
  }
}

3. 实例引用不匹配 #

如果你调用getImageIndex的实例，和正在播放动画的实例不是同一个对象，自然会拿到错误的初始值。检查代码中是否多次创建了SpriteAnimation实例，确保操作的是同一个对象。

验证步骤 #

先确认#setImageIndex是否真的在更新值：

#setImageIndex() {
  this.#imageIndex = (this.#imageIndex + 1) % this.#totalFrames;
  console.log('更新后的imageIndex:', this.#imageIndex);
}

运行动画后查看控制台：

• 如果有递增的数值输出，说明#imageIndex在正常更新，问题出在getter的访问方式；
• 如果没有输出，说明#setImageIndex未被触发，检查动画启动逻辑是否正确调用了该方法。

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