javascript - 使用 Greensock 制作雪佛龙动画

Question

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

进入:

我在 Codepen https://www.codepen.io/Brushel/pen/boryZP 上有一个工作版本我的目标是 chevron 的 id，并且使用 MorphSVG gs 函数附加了一个小的事件监听器。但是，我想要 V 形从底部点开始制作动画，然后慢慢向上制作动画。现在它只是在单击时更改 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 转换，某些浏览器优先于“transform”属性，但“transform”属性在浏览器之间更加一致。这就是 GSAP 使用它的原因。因此，在您的示例中，您遇到了冲突，CSS 转换覆盖了属性中应用的转换。

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

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

这是一个修改后的代码笔，它还使用 shapeIndex 来更改形状变形的方式 - 这是您正在寻找的吗？ https://codepen.io/GreenSock/pen/3bf8c2aec6c2171d158bdf13bff33525/