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

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缩放和死角图像？

1 个答案: