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。

尽管并没有像调用方法那样简单的解决方案，因为每个动画都是唯一的，但是这里有一些选项可以帮助您入门。

GreenSock或SnapSVG之类的SVG动画库
使用Airbnb Lottie-您可以使用Adobe Illustrator进行设计，Lottie将输出为JSON

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

如何实现此svg动画？

2 个答案: