Как добиться этой SVG анимации?

Question

мир. Я ноб-кодер, надеялся получить ответ на мой вопрос здесь в первый раз!

Я пытаюсь получить что-то вроде этих (три анимации прямо под баннером) svg animationsдля моего собственного сайта.

/* 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>

Я сделал svg через иллюстратор, а затем экспортировал код в свою программу кодирования, однако я не уверен, как на самом деле анимировать строки такчто она начинается в одной точке и прослеживается в другой в другом цвете, в разных направлениях.

Надеюсь, здесь я понимаю, любая помощь будет отличной. Дайте мне знать, если у вас есть какие-либо решения или ресурсы, которые могут помочь мне достичь этого.

Answer 1

У меня был похожий проект, где анимация представляла собой проблему. Сначала я попробовал использовать видео, затем GIF, но в конце концов использовал SVG.

Хотя не существует простого решения, например, метода для вызова, поскольку каждая анимация уникальна, здесь приведены параметры, которые могут помочь вам начать работу.

1. Библиотеки анимации SVG, такие как GreenSock или SnapSVG
2. Использование Airbnb Lottie - вы можете создавать с помощью Adobe Illustrator, и Лотти будет выводить как JSON

В итоге я использовал Lotties, поскольку структура JSON была удобной.

Answer 2

Возможно, вы захотите взглянуть на эту статью для получения дополнительной информации о том, как анимировать строки 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