JS类属性未按预期更新：Canvas精灵动画按钮复用故障排查

问题根源 #

你遇到的核心问题是GSAP回调函数的this指向错误：

• 在GSAP动画配置的onComplete普通函数里，this默认指向的是GSAP的动画实例（比如Tween或Timeline对象），而非你的Sprite类实例。
• 所以你在onComplete里设置this.animation_playing = false，实际上是给GSAP的动画对象添加了临时属性，根本没修改到Sprite实例上的animation_playing值——外部判断时这个属性始终为初始的true，自然无法再次触发动画。
• 而全局变量btn_click属于全局作用域，在回调里能直接修改，所以生效正常。

解决方法 #

有三种常用方式修正this指向，确保修改的是Sprite实例的属性：

方式1：使用箭头函数 #

箭头函数不会绑定自身的this，会继承外层作用域的this（也就是Sprite实例）：

class Sprite {
  constructor() {
    this.animation_playing = false;
  }

  attack_anim() {
    this.animation_playing = true;
    gsap.to(/* 你的动画目标与参数 */, {
      // 其他动画配置
      onComplete: () => {
        btn_click = false;
        this.animation_playing = false; // 此处this指向Sprite实例
      }
    });
  }
}

方式2：提前保存实例引用 #

在attack_anim方法里先把Sprite实例的this存到变量（比如self），回调里用这个变量访问实例属性：

class Sprite {
  constructor() {
    this.animation_playing = false;
  }

  attack_anim() {
    const self = this; // 保存Sprite实例的引用
    this.animation_playing = true;
    gsap.to(/* 你的动画目标与参数 */, {
      // 其他动画配置
      onComplete: function() {
        btn_click = false;
        self.animation_playing = false; // 用self访问Sprite实例
      }
    });
  }
}

方式3：指定GSAP的callbackScope #

在GSAP动画配置里添加callbackScope: this，强制回调函数的this指向当前Sprite实例：

class Sprite {
  constructor() {
    this.animation_playing = false;
  }

  attack_anim() {
    this.animation_playing = true;
    gsap.to(/* 你的动画目标与参数 */, {
      // 其他动画配置
      onComplete: function() {
        btn_click = false;
        this.animation_playing = false; // 此处this指向Sprite实例
      },
      callbackScope: this // 指定回调的this上下文
    });
  }
}

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