如何使用GSAP Tween同时更新CSS变量与普通变量

嘿，这个需求我之前也折腾过！要同时实时更新DOM元素的CSS自定义属性和普通JS变量，而且不让变量变成对象，GSAP其实有几种很实用的方案，我给你拆解一下：

方案一：补间DOM元素，通过onUpdate同步变量 #

这种方法适合你已经以DOM动画为核心的场景，每帧从DOM读取当前的CSS变量值，同步到你的value变量：

const item = document.getElementById('test');
let value = 0;
const finalValue = 100;

// 用GSAP 3的语法（已经整合了TweenMax/TweenLite的功能）
gsap.to(item, 0.2, {
  '--some-var': finalValue,
  // 每帧动画更新时同步变量
  onUpdate: function() {
    // 获取当前CSS变量值并转为数字
    value = parseFloat(getComputedStyle(item).getPropertyValue('--some-var'));
  },
  // 动画结束时确保值完全精确（避免浮点误差）
  onComplete: function() {
    value = finalValue;
  }
});

注意：getComputedStyle会读取元素的计算样式，对于短动画来说性能完全没问题，但如果是长时间循环动画，可能会有微小的性能开销。

方案二：用代理对象做中间层（更高效） #

GSAP最擅长补间对象的属性，所以我们可以创建一个代理对象来承载数值，然后同步到DOM和你的变量，这种方式不需要从DOM读取值，性能更优：

const item = document.getElementById('test');
let value = 0;
const finalValue = 100;
// 创建代理对象，用来承载要补间的数值
const proxy = { currentValue: value };

gsap.to(proxy, 0.2, {
  currentValue: finalValue,
  // 每帧同步到CSS变量和你的value变量
  onUpdate: function() {
    item.style.setProperty('--some-var', proxy.currentValue);
    value = proxy.currentValue;
  },
  onComplete: function() {
    // 确保最终值精准
    item.style.setProperty('--some-var', finalValue);
    value = finalValue;
  }
});

这种方法的好处是，你可以随时通过proxy.currentValue或者value获取当前的动画进度数值，完全不需要依赖DOM，适合需要频繁使用这个数值的场景。

为什么之前的数组方法不行？ #

你提到的传入数组的方式，GSAP会尝试给数组里的每个目标设置相同的属性。但普通JS变量不是对象，GSAP无法直接修改它的属性——它只能补间对象的属性，所以单独的变量没法直接放进补间目标里，代理对象就是解决这个问题的关键。

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