用Greensock制作雪佛龙动画

Question

所以我正在尝试使用Greensock库为Chevron制作动画。我的目标是制作

收件人：

我在Codepen https://www.codepen.io/Brushel/pen/boryZP上有一个工作版本 我的目标是雪佛龙的id，我使用MorphSVG gs函数附加了一个小事件监听器。但是，我希望雪佛龙能够从底部开始制作动画并慢慢制作动画。现在只需点击即可更改SVG坐标。

以下是代码：

var chevron = document.getElementById("chevron");

chevron.addEventListener('click', function(){
  TweenLite.to("#chevron", 0.08, {
    morphSVG: "100,72.6 173.6,157.4 200,157.4 100,42.2 0,157.4 26.4,157.4"
  });
});

.container {
  max-width: 800px;
  margin: 0 auto;
}

.st0{
  fill:#000;
}

#chevron {
  transform: scale(.2);
}

<div class="container">
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
  <g id="icon_x5F_chevron">
    <polygon class="st0" id="chevron" points="100,126.97715 26.4165,42.19543 0,42.19543 100,157.41371 200,42.19543 173.5835,42.19543 	"/>
  </g>
  </svg>
  </div>

Answer 1

看起来您应用了一个CSS转换，某些浏览器优先于“转换”属性，但“转换”属性在浏览器中更加一致。这就是GSAP使用它的原因。因此，在您的示例中，您遇到了一个冲突，即CSS变换正在推翻属性中应用的变换。

您应始终通过GSAP直接设置与转换相关的值，以确保跨浏览器兼容性。

TweenLite.set("#chevron", {scale:0.2});

这是一个经过修改的codepen，它也使用shapeIndex来改变形状变形的方式 - 你正在寻找什么？ https://codepen.io/GreenSock/pen/3bf8c2aec6c2171d158bdf13bff33525/