如何复制 flecto.io 英雄部分上完成的精确动画

Question

我遇到了 https://flecto.io（如果该网站打不开，请使用 VPN），该网站引起了我的注意。我想复制英雄部分的动画。更准确地说，就是绿色矩形变成十字形的部分。

起始形状

最终形状（我删除了不需要的干扰）

我知道这可以通过使用 gsap morphSVG 插件来完成。但我发现为此目的使用该插件很困难。这是我正在制作的演示的链接这里。

HTML

<div class="container">
    <svg viewBox="0 0 1900 1500" fill="none">
      <g>
        <path id="rectangle" d="M0 0H1889V157V758V915H0V758V178.5V0Z" fill="black"/>
       
         <path id="final-stage" class="hide" d="M505.5 125.5H22.5H19C9.05887 125.5 1 133.559 1 143.5V774C1 783.941 9.05887 792 19 792H198.5C208.441 792 216.5 800.059 216.5 810V898C216.5 907.941 224.559 916 234.5 916H1426.5C1436.44 916 1444.5 907.941 1444.5 898V809.5C1444.5 799.559 1452.56 791.5 1462.5 791.5H1872C1881.94 791.5 1890 783.441 1890 773.5V144C1890 134.059 1881.94 126 1872 126H1385.5C1375.56 126 1367.5 117.941 1367.5 108V19C1367.5 9.05887 1359.44 1 1349.5 1H541.5C531.559 1 523.5 9.05888 523.5 19V107.5C523.5 117.441 515.441 125.5 505.5 125.5Z" fill="black" stroke="black" />
      </g>
    </svg>
  </div>

CSS

.container {
  width: 800px;
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  width: 100%;
  height: 100%;
}

.hide {
  visibility: hidden;
}

Javascript（我在codepen上使用gsap插件和gsap morphSVG插件）

gsap.registerPlugin(MorphSVGPlugin);

// MorphSVGPlugin.defaultType = "rotational";

var tl = gsap.timeline();
const rectangle = document.getElementById("rectangle");

  tl.to(rectangle, { duration: 1, morphSVG: {shape: "#final-stage", shapeIndex: -2 }});

这是我的结果https://streamable.com/mnh46o（此内容将来可能不可用）

问题是，在检查了该网站后，创作者并没有将矩形变成十字形。他们将其形状分解为更小的形式，由两个具有不同构造的框架组成。

请注意，第一个框架是具有十字切口的实心形状，而第二个框架是形成十字切口的多个形状的组合。他们为什么要这样构建英雄部分？我还没弄清楚。但我相信这种方法使他们的动画比我将 SVG 变成十字的方法更流畅。

那么，大家觉得怎么样呢？我怎样才能复制这个设计？最好的方法是什么？

Answer 1

你需要两条路；起始和结束路径。动画可以使用 CSS 动画 或使用 带有 SMIL 的 SVG 动画来完成。

在您的代码中，结束路径中有 27 个命令，因此起始路径中应该有相同数量的命令。

在这里，我创建了一个“原始”版本，其中起始路径只是一个正方形，命令是相对的，并且大多数命令只有零。在生产就绪版本中，您将匹配所有命令，以便它们以正确的方式移动并保持圆角。

path {
  d: path('m 1 1 h 0 h 0 c 0 0 0 0 0 0 v 915 c 0 0 0 0 0 0 h 1889 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v -915 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h -1889 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 z');
  animation-duration: 3s;
  animation-name: anim;
  animation-fill-mode: forwards;
}

@keyframes anim {
  from {
    d: path('m 1 1 h 0 h 0 c 0 0 0 0 0 0 v 915 c 0 0 0 0 0 0 h 1889 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v -915 c 0 0 0 0 0 0 h 0 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 h -1889 c 0 0 0 0 0 0 v 0 c 0 0 0 0 0 0 z');
  }
  to {
    d: path('M505.5 125.5H22.5H19C9.05887 125.5 1 133.559 1 143.5V774C1 783.941 9.05887 792 19 792H198.5C208.441 792 216.5 800.059 216.5 810V898C216.5 907.941 224.559 916 234.5 916H1426.5C1436.44 916 1444.5 907.941 1444.5 898V809.5C1444.5 799.559 1452.56 791.5 1462.5 791.5H1872C1881.94 791.5 1890 783.441 1890 773.5V144C1890 134.059 1881.94 126 1872 126H1385.5C1375.56 126 1367.5 117.941 1367.5 108V19C1367.5 9.05887 1359.44 1 1349.5 1H541.5C531.559 1 523.5 9.05888 523.5 19V107.5C523.5 117.441 515.441 125.5 505.5 125.5Z');
  }
}

<svg viewBox="0 0 1900 1500">
  <path fill="black" stroke="black"/>
</svg>