GSAP: сохранение предыдущих преобразований при анимации SVG

Question

Я создаю небольшой интерактивный веб-сайт, используя scrollmagic и GSAP для анимации элементов SVG.
Однако при анимации значения y элемента с преобразованием rotate() преобразование было удалено. Добавление вращения в анимацию не дало правильного результата; ротация была удалена из анимации, а затем снова оживлена.
Кто-нибудь знает, как сохранить поворот элемента SVG при анимации других атрибутов в GSAP?
пример кода:
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> 

ЯШ:

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

скрипку: https://jsfiddle.net/159phcxw/

Answer 1

Короткий ответ:, как предложил Тахир, просто добавьте в код JS :

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

---

я настоятельно рекомендую обработку все ваши преобразований через GSAP, потому что она защищает вас от кучи вещей, как браузер несоответствия и потеря точности с вращательными значениями за пределами 360 градусов.

GSAP записывает значения, связанные с преобразованием, в специальный объект _gsTransform, который прикреплен к самому элементу; это не только повышает производительность (без повторного анализа вычисленной матрицы стилей или значений matrix3d), но также позволяет полностью независимое управление каждым компонентом преобразования (поворот, scaleX, scaleY, x, y, skewX, skewY и т. д.) независимо от времени смещения или экстремальные значения вращения (невозможно с помощью CSS).

В вашем случае вы смешивали преобразования - вы помещаете поворот в атрибут, а затем вы просили GSAP обрабатывать перевод. GSAP может фактически анализировать значения matrix(), которые вы помещаете в атрибут transform, или он может также анализировать любые преобразования CSS, но вам удалось определить только rotate(), который не может быть проанализирован (я пощажу вам объяснение).

Установка любых значений, связанных с преобразованием, через GSAP обеспечивает максимальную производительность и совместимость, а также легче искать текущие значения внутри объекта _gsTransform позже, если они вам понадобятся.