如何实现这个 svg 动画？

Question

世界。我是一个菜鸟编码员，希望第一次在这里回答我的问题！

我正在尝试为我自己的网站获取类似these（横幅下方的三个动画）svg 动画。

/* CSS */

svg {
      max-width: 95%;
      max-height: 95%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

    /* HTML */ 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
    	 height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#999999;}
    	.st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
    </style>
    <defs>
    </defs>
    <g>
    	<path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/>
    </g>
    <line class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/>
    <polyline class="st1" points="1,97.65 14.31,97.65 62,97.65 "/>
    <line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/>
    <line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/>
    </svg>

我已经通过 illustrator 制作了 svg，然后将代码导出到我选择的编码程序中，但是我不确定如何实际为线条设置动画，以便它从一个点开始并以不同的颜色跟踪到另一个点，各个方向。

希望我在这里有意义，任何帮助都会很棒。如果您有任何解决方案或资源可以帮助我实现这一目标，请告诉我。

Answer 1

您可能想查看这篇文章，了解有关如何为 SVG 线条设置动画的更多信息：https://css-tricks.com/svg-line-animation-works/

这是一个使用 SVG 形状的示例：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="212px"
        height="154px" viewBox="0 0 212 154" style="enable-background:new 0 0 212 154;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#999999;}
        .st1{fill:none;stroke:#999999;stroke-miterlimit:10;}
    </style>
    <defs>
    </defs>
    <g>
        <path class="st0" d="M211,1v152H1V1H211 M212,0H0v154h212V0L212,0z"/>
    </g>
    <line  class="st1" x1="62.5" y1="1" x2="62.5" y2="153"/>
    <polyline  class="st1" points="1,97.65 14.31,97.65 62,97.65 "/>
    <line class="st1" x1="14.39" y1="153" x2="14.39" y2="98"/>
    <line class="st1" x1="62.1" y1="125.82" x2="14.9" y2="125.82"/>
</svg>

svg {
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
svg .st0{
stroke:#4444ff;
stroke-width:2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}

Codepen：https://codepen.io/kostasx/pen/yLLLeXJ?editors=1100

Answer 2

我有一个类似的项目，其中动画提出了挑战。我最初尝试使用视频，然后是 GIF，但最终使用 SVG。

虽然由于每个动画都是独一无二的，因此没有像调用方法这样的直接解决方案，但这里有一些选项可以帮助您入门。

1. SVG 动画库，例如 GreenSock 或 SnapSVG
2. 使用 Airbnb Lottie - 您可以使用 Adob​​e Illustrator 进行设计，Lottie 将输出为 JSON

我最终使用了 Lotties，因为 JSON 结构是一种方便的方法。