gsap Flip.fit svg 元素没有移动到预期的坐标，因为 { duration: x }

Question

我对 gsap 的 Flip.fit 移动到坐标感到困惑。

我有一个游戏板，有 182 个牌和 182 个游戏牌。

目标

当用户点击袋子时，会选择一个随机玩的牌，并且“应该”移动到棋盘上的牌上。

如果你改变

Flip.fit(PTILE[tileArray], TILE[tileArray], {duration: 1 , scale: true});

当更改 { duration: 0, ... } 时，移动按预期工作，但没有动画。当持续时间大于零时，最终位置非常随机。

codepen

Answer 1

我不确定持续时间如何影响最终位置，但是，我找到了使位置正确的方法。在告诉 GSAP 执行翻转动画之前，重置 PTILE 的 transform。

// reset transform value
gsap.set(PTILE[tileArray], { transform: "" });

// animate with new transform value
Flip.fit(PTILE[tileArray], TILE[tileArray], {
    duration: 1,
    scale: true
});

我的原因是 PTITLE 和 TITLE 放在不同的 <g> 标签中，这意味着 它们的转换系统不一致。另外，Flip.fit() 将表现得像 gsap.to()，新的 TITLE 位置是 to 对象，GSAP 将尝试从您的原始转换中计算出 from 对象已在 SVG 中设置为 transform:matrix()。不知何故，这个过程搞砸了。所以我所做的是给 GSAP 一个精确的 from 对象的转换值，它是空的。

Answer 2

好的，我发现 Inkscape 存储带有内联转换的 SVG，这会导致动画失效。我尝试保存在普通或优化中，但仍然没有运气。

所以有两种解决方案。

使用 SVGOMG 在线 SVG 清洁器。
使用 Affinity Designer 可以导出和展平转换的应用程序。

排除其他因素的关键是使用相对坐标和展平变换。

我附上了 Affinity 导出选项的屏幕截图。 Affinity Export screenshot

gsap Flip.fit svg 元素没有移动到预期的坐标，因为 { duration: x }

gsap Flip.fit svg element not moving to expected coordinates because of { duration: x }

animation

svg

gsap

排除其他因素的关键是使用相对坐标和展平变换。