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})

小提琴：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时保留以前的转换

1 个答案: