GSAP + PaperJS位置动画

Question

我正在尝试将其集成到现有的Paper.js应用程序中，以替换原始的.tweenTo函数(http://paperjs.org/reference/tween/)。到目前为止，我面临的唯一问题是位置或点属性动画的“链接”：

https://codepen.io/yevsim/pen/GRmPBZB

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();

timeline.to(text.point, { duration: 1, x: '+=100' });
timeline.to(text.point, { delay: 1, duration: 1, x: '+=100' });

由于我不知道的原因，在执行第二个动画之前，它会将文本移回其原始位置(即，它不是从100 -> 200 -> 300移动到100 -> 200 -> 100 -> 200)。链接其他属性动画，如宽度，高度，颜色，不透明度，如预期的工作。我试着用位置替换点，将它们组合在一起，但对我来说什么都不起作用。

Answer 1

我真的不知道为什么，但是如果你把text.point存储到一个变量中，并且在创建时间轴时使用这个变量而不是对实际对象的引用，这将会起作用。

基于你的代码，下面是一个修正后的版本：

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

// Use a variable to reference the property to animate.
const point = text.point;
const timeline = gsap.timeline();
timeline.to(point, { duration: 1, x: '+=100' });
timeline.to(point, { delay: 1, duration: 1, x: '+=100' });