GSAP + PaperJS 位置动画答案

【问题标题】：GSAP + PaperJS position animationGSAP + PaperJS 位置动画
【发布时间】：2021-08-10 11:58:58
【问题描述】：

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

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 ）。链接其他属性动画，例如宽度、高度、颜色、不透明度按预期工作。我尝试用位置替换点，将它们组合在一起，但对我没有任何效果。

【问题讨论】：

如果您还没有，我建议您在the GSAP forums 中提出这个问题。
对于任何想知道的人来说，看起来fromTo (greensock.com/docs/v3/GSAP/Timeline/fromTo()) 是去这里的方式。现在等待 GSAP 论坛的答复。将在这里更新。
看起来 Paper.js 每次引用 text.point 时都会返回不同的对象。这是解决方案：greensock.com/forums/topic/….

标签： javascript gsap paperjs

【解决方案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' });

【讨论】：