Как я могу масштабировать и поворачивать изображение с помощью Greensock? - PullRequest
Новая
       7

Как я могу масштабировать и поворачивать изображение с помощью Greensock?

0 голосов
/ 28 июня 2018

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

TweenMax.to(['#logo'], 10, {bezier:[
  {x:"250px",y:"-40px"},
  {x:"500px",y:"250px"},
  {x:"250px",y:"500px"},
  {x:"0px",y:"250px"},
  {x:"0px",y:"0px"},
],repet:2,ease:Linear.easeNone});
body{
  background-color:#fff;
}
#logo{
  position:absolute;
  left:0;
  top:0;
}

.circle{
  position:relative;
  width:500px;
  height:500px;
  border:1px solid #000;
  border-radius:50%;
  margin:0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="circle">
  <img id="logo" src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=80">
</div>

Мой пример ниже, но он не работает 

    TweenMax.to(['#logo'], 10, {bezier:[
      {x:"250px",y:"-40px", scale:0.2},
      {x:"500px",y:"250px"},
      {x:"250px",y:"500px"},
      {x:"0px",y:"250px", scale:0.8,},
      {x:"0px",y:"0px"},
    ],repet:2,ease:Linear.easeNone});

1 Ответ

0 голосов
/ 13 июля 2018

Чтобы использовать атрибут 'bezier', вам нужно включить плагин morph gsap. https://greensock.com/docs/Plugins/MorphSVGPlugin

Я также обнаружил некоторые ошибки в скобках и «повтор». Помните, что селектор [] для элемента необходим только в том случае, если вы хотите анимировать более одного элемента.

Я также думаю, что вы не можете изменить масштаб внутри атрибута Безье, я также рекомендую использовать pathDataToBezier для получения пути, вместо того, чтобы жестко кодировать его, я имею в виду.

Надеюсь, это поможет, gsap, это очень весело. </p> <pre><code>TweenMax.to('#logo', 10, {bezier:{ {x:"250px",y:"-40px"}, {x:"500px",y:"250px"}, {x:"250px",y:"500px"}, {x:"0px",y:"250px"}, {x:"0px",y:"0px"}, }, scale: 0.8, repeat:2,ease:Linear.easeNone});

...