Анимировать вдоль дорожки в отзывчивом SVG - PullRequest
Новая
       46

Анимировать вдоль дорожки в отзывчивом SVG

0 голосов
/ 15 октября 2018

Я пытаюсь сделать анимацию с Гринсок.Я хочу переместить воздушный шар над нарисованной линией, и графика / анимация должны быть масштабируемыми.

У меня проблема с выравниванием svg воздушного шара с нарисованной линией.Как только ширина браузера не станет равной ширине области просмотра svgs, анимация не будет работать.Я уверен, что это не настоящий дух масштабируемой (!) Векторной графики.Так что я делаю не так?Как я могу выровнять шарик по линии, даже когда размер svg меняется?

Вот упрощенный код маленького проекта: 

TweenMax.to("#balloon", 3, {
    bezier: {
      values: MorphSVGPlugin.pathDataToBezier("#Path23",{
        //matrix:[1.5,0,0,1.5,0,scaleX+"%"],
        offsetX: -50,
        offsetY: -50,
       align:"#balloon"}),
      type: "cubic"
    },
    ease: Linear.easeNone,
    repeat: -1,
    force3D: true
  });

CodePen

1 Ответ

0 голосов
/ 17 октября 2018

Проблема была в том, что я использовал два svgs вместо одного контейнера.Также transformOrigin заставил его работать в конце.Я обновил кодовую ручку.Теперь это работает.

...