GSAP：动画 SVG 时保留以前的转换答案

【问题标题】：GSAP: preserve previous transformations when animating SVGGSAP：动画 SVG 时保留以前的转换
【发布时间】：2016-01-25 10:05:09
【问题描述】：

我正在使用 scrollmagic 和 GSAP 制作一个小型交互式网站来为 SVG 元素设置动画。
但是，当为具有 rotate() 变换的元素的 y 值设置动画时，该变换被移除。将旋转添加到动画中并没有产生正确的结果；旋转已从动画中移除，然后再次动画化。
有谁知道在 GSAP 中为其他属性设置动画时如何保持 SVG 元素的旋转？
示例代码：
html:

<svg height='300px' width='500px' style='position: absolute;'>
    <rect id='rect' width='200' height='75' style='fill:#888;stroke-width:2;stroke:#000' y='0' x='120' transform='rotate(45)' />
</svg>

js:

TweenMax.to('#rect', 1, {x: 100})

小提琴：https://jsfiddle.net/159phcxw/

【问题讨论】：

你能准备一把小提琴吗？
已添加小提琴
可能有多种方法可以解决这个问题，但正如我想象的那样，您在 SVG 元素本身上定义了 transform。所以 here 就是我所做的。我已将TweenMax 用于.set() rotation 并将其从 SVG 元素本身中删除。有意义吗？

标签： javascript animation svg gsap

【解决方案1】：

简短回答： 正如 Tahir 所建议的，只需将其添加到您的 JS 代码中即可：

TweenMax.set("#rect", {rotation:45});

我强烈建议您通过 GSAP 处理所有转换，因为它可以保护您免受浏览器不一致和超过 360 度旋转值导致精度损失等一系列问题的影响。

GSAP 将与变换相关的值记录在附加到元素本身的特殊 _gsTransform 对象中；这不仅提高了性能（无需重新解析计算的样式矩阵或 matrix3d 值），而且允许对每个变换组件（旋转、scaleX、scaleY、x、y、skewX、skewY 等）进行完全独立的控制，而不管时间如何偏移量或极端旋转值（CSS 不可能）。

在您的情况下，您正在混合变换 - 您将旋转放入属性中，然后您要求 GSAP 处理平移。 GSAP 实际上可以解析你放入 transform 属性的 matrix() 值，或者它也可以解析任何 CSS 变换，但是你碰巧只定义了一个无法解析的 rotate() （我会省去你的解释）。

通过 GSAP 设置任何与转换相关的值可以获得最佳性能和兼容性，此外，如果您需要，以后可以更轻松地在 _gsTransform 对象中查找当前值。

【讨论】：