css - 如何使用 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

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

我还认为您不能更改 bezier 属性内的比例，我还建议使用 pathDataToBezier 来获取路径，而不是硬编码。

希望对您有所帮助，gsap 它很有趣。

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"},
}，比例:0.8，重复:2，缓动:Linear.easeNone})；