如何使用 Greensock 缩放和旋转图像？

Question

我正在处理围绕一个圆圈旋转的图像。当我的图像围绕圆圈旋转时，我希望它随着旋转而增长。我正在使用中所示的示例 Circular Motion example

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

Answer 1

为了使用 'bezier' 属性，您需要包含 morph gsap 插件。 https://greensock.com/docs/Plugins/MorphSVGPlugin

我还发现了一些括号错误和'repet'。请记住，仅当您想要为多个不同元素设置动画时才需要元素的 [] 选择器。

我也认为你不能改变 bezier 属性内的比例，我还建议使用 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});

如何使用 Greensock 缩放和旋转图像？

How can I scale and rote an image using Greensock?

css

gsap