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

【问题标题】：How can I scale and rote an image using Greensock?如何使用 Greensock 缩放和旋转图像？
【发布时间】：2018-06-27 21:55:28
【问题描述】：

我正在处理一个围绕圆圈旋转的图像。当我的图像围绕圆圈旋转时，我希望它随着旋转而增长。我正在使用中显示的示例 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});

【问题讨论】：

标签： css gsap

【解决方案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"},
}, scale: 0.8, repeat:2,ease:Linear.easeNone});

【讨论】：