时间戳

首页 > 解决方案 > 如何使用 Greensock 缩放和旋转图像？

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

问题描述

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

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

标签： cssgsap

解决方案

为了使用 '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});

推荐阅读