GSAP：在设置 SVG 动画时保留之前的转换

Question

我正在制作一个小型交互式网站，使用 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})

fiddle: https://jsfiddle.net/159phcxw/

Answer 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 对象中查找当前值。

GSAP：在设置 SVG 动画时保留之前的转换

GSAP: preserve previous transformations when animating SVG

javascript

animation

svg

gsap