GSAP集成Paper.js实现位置动画时链式调用异常问题咨询

问题原因 #

Paper.js的Point类型是值引用对象，每次访问元素的point/position属性时，Paper.js都会返回一个全新的Point实例，而非原有实例的引用。你给GSAP传入的两段tween的目标分别是两次访问拿到的不同Point实例，第二段tween初始化时读取的是初始状态的坐标值，因此会出现复位问题。
宽高、颜色、透明度等属性不存在该问题，是因为这些属性都是普通值类型，访问时不会生成新的实例。

解决方案 #

方案1：直接对元素本身做补间 #

Paper.js所有Item子类都暴露了直接读写的x、y属性，直接将元素作为GSAP的补间目标即可：

paper.install(window)  
paper.setup(canvas);

const text = new PointText({
    point: new Point(100, 100),
    fontFamily: "sans-serif",
    fontWeight: "bold",
    fontSize: 48,
    fillColor: 'black'
});
text.content = 'Move me';

const timeline = gsap.timeline();
// 直接补间text元素的x属性
timeline.to(text, { duration: 1, x: '+=100' });
timeline.to(text, { delay: 1, duration: 1, x: '+=100' });

方案2：提前缓存Point实例引用 #

如果你需要直接操作Point实例，提前缓存同一个Point实例的引用即可，不要每次都从元素上读取：

const text = new PointText({
    point: new Point(100, 100),
    fontFamily: "sans-serif",
    fontWeight: "bold",
    fontSize: 48,
    fillColor: 'black'
});
text.content = 'Move me';
// 提前缓存Point实例引用
const targetPoint = text.point;

const timeline = gsap.timeline();
timeline.to(targetPoint, { duration: 1, x: '+=100' });
timeline.to(targetPoint, { delay: 1, duration: 1, x: '+=100' });

两种方案都可以实现预期的x坐标100→200→300的连续位移效果，不会出现复位问题。

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