Как анимировать SVG для рисования линий вместо контуров? - PullRequest
Новая
       18

Как анимировать SVG для рисования линий вместо контуров?

0 голосов
/ 16 января 2020

Я пытаюсь анимировать SVG-файл, чтобы он выглядел как можно ближе к рисунку ниже, мне кажется, я довольно близок, но застрял в проблеме, из-за которой я не знаю, почему тогда нарисованы контуры вся вещь заполнена. Я бы хотел, чтобы все строки были анимированы, как показано на рисунке.

Кто-нибудь знает, что я могу изменить в своем CSS или, если в SVG есть что-то, что мне нужно изменить, чтобы сделать это возможным, я совершенно новичок в анимации SVG.

Текущая анимация 

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
    <defs>
      <style>
      .cls-1 {
        fill:#f59e00;
      }
      .cls-2 {
        fill:#7a1331;
      }
      #Dots circle {
        fill:#1e9a64;
      }
      #Lines path {
        animation: draw 3s linear forwards;
        animation-delay: 1.2s;
      }

      #Years_Text {
        animation: 1s ease-out 0s 1 slideInFromRight;
      }

      .line-1 {
        stroke-dasharray: 2150;
        stroke-dashoffset: 2150;
      }
      .line-2 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-3 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .line-4 {
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
      }
      .line-5 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-6 {
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }

        @keyframes draw {
          to {
            stroke-dashoffset: 0;
            fill: #1e9a64;
          }
        }


        .dot-1 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-2 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-3 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-4 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-5 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-6 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-7 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-8 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-9 {
          animation: 1s ease-out 0s 1 slideInFromTop;
        }
        .dot-10 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-11 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }
        .dot-12 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }

        @keyframes slideInFromLeft {
          0% {
            transform: translate(-20%, -20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromRight {
          0% {
            transform: translate(+20%, +20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToRight {
          0% {
            transform: translate(-5%, +50%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToLeft {
          0% {
            transform: translate(+15%, +30%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromTop {
          0% {
            transform: translate(-5%, -5%);
          }
          100% {
            transform: translate(0, 0);

          }
        }

        </style>
    </defs>

<g id="Lines">
        <path class="line-1" fill="none" stroke="#1e9a64" stroke-width="2" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
        <path class="line-2" fill="none" stroke="#1e9a64" stroke-width="2" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
        <path class="line-3" fill="none" stroke="#1e9a64" stroke-width="2" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
        <path class="line-4" fill="none" stroke="#1e9a64" stroke-width="2" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
        <path class="line-5" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
        <path class="line-6" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
    </g>


    <g id="Dots">
        <circle class="dot-1" cx="941.03" cy="147.03" r="6.98" />
        <circle class="dot-2" cx="941.23" cy="23.59" r="6.98" />
        <circle class="dot-3" cx="958.83" cy="61.32" r="6.98" />
        <circle class="dot-4" cx="949.22" cy="42.96" r="6.98" />
        <circle class="dot-5" cx="1014.77" cy="165.69" r="6.98" />
        <circle class="dot-6" cx="1045.08" cy="184.35" r="6.98" />
        <circle class="dot-7" cx="1109.85" cy="6.98" r="6.98" />
        <circle class="dot-8" cx="1130.49" cy="6.98" r="6.98" />
        <circle class="dot-9" cx="1109.85" cy="165.69" r="6.98" />
        <circle class="dot-10" cx="1130.49" cy="165.69" r="6.98" />
        <circle class="dot-11" cx="1102.87" cy="105.99" r="6.98" />
        <circle class="dot-12" cx="1102.87" cy="85.35" r="6.98" />
    </g>
</svg>

Разыскиваемая анимация

enter image description here

1 Ответ

0 голосов
/ 16 января 2020

Основная проблема c: 

@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill: #1e9a64; <=== this
  }
}

Вы не можете fill, поскольку path dr aws только после путь завершен.

Я бы предложил настроить пути так, чтобы расстояние между "сторонами" пути составляло примерно половину ширины хода.

В качестве альтернативы, отрегулируйте ширину хода (скажем, stroke-width="7.5") и сделайте круги немного больше (скажем r="9.98) ...

Примерно так (плохое приближение): 

svg {
  margin: 5vh
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
    <defs>
      <style>
      .cls-1 {
        fill:#f59e00;
      }
      .cls-2 {
        fill:#7a1331;
      }
      #Dots circle {
        fill:#1e9a64;
      }
      #Lines path {
        animation: draw 3s linear forwards;
        animation-delay: 1.2s;
      }

      #Years_Text {
        animation: 1s ease-out 0s 1 slideInFromRight;
      }

      .line-1 {
        stroke-dasharray: 2150;
        stroke-dashoffset: 2150;
      }
      .line-2 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-3 {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
      }
      .line-4 {
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
      }
      .line-5 {
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
      }
      .line-6 {
        stroke-dasharray: 1300;
        stroke-dashoffset: 1300;
      }

        @keyframes draw {
          to {
            stroke-dashoffset: 0;
          }
        }


        .dot-1 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-2 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-3 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-4 {
          animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
        }
        .dot-5 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-6 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-7 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-8 {
          animation: 1s ease-out 0s 1 slideInFromCenterToRight;
        }
        .dot-9 {
          animation: 1s ease-out 0s 1 slideInFromTop;
        }
        .dot-10 {
          animation: 1s ease-out 0s 1 slideInFromLeft;
        }
        .dot-11 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }
        .dot-12 {
          animation: 1s ease-out 0s 1 slideInFromRight;
        }

        @keyframes slideInFromLeft {
          0% {
            transform: translate(-20%, -20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromRight {
          0% {
            transform: translate(+20%, +20%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToRight {
          0% {
            transform: translate(-5%, +50%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromCenterToLeft {
          0% {
            transform: translate(+15%, +30%);
          }
          100% {
            transform: translate(0, 0);

          }
        }
        @keyframes slideInFromTop {
          0% {
            transform: translate(-5%, -5%);
          }
          100% {
            transform: translate(0, 0);

          }
        }

        </style>
    </defs>

<g id="Lines">
        <path class="line-1" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
        <path class="line-2" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
        <path class="line-3" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
        <path class="line-4" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
        <path class="line-5" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
        <path class="line-6" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
    </g>


    <g id="Dots">
        <circle class="dot-1" cx="941.03" cy="147.03" r="9.98" />
        <circle class="dot-2" cx="941.23" cy="23.59" r="9.98" />
        <circle class="dot-3" cx="958.83" cy="61.32" r="9.98" />
        <circle class="dot-4" cx="949.22" cy="42.96" r="9.98" />
        <circle class="dot-5" cx="1014.77" cy="165.69" r="9.98" />
        <circle class="dot-6" cx="1045.08" cy="184.35" r="9.98" />
        <circle class="dot-7" cx="1109.85" cy="6.98" r="9.98" />
        <circle class="dot-8" cx="1130.49" cy="6.98" r="9.98" />
        <circle class="dot-9" cx="1109.85" cy="165.69" r="9.98" />
        <circle class="dot-10" cx="1130.49" cy="165.69" r="9.98" />
        <circle class="dot-11" cx="1102.87" cy="105.99" r="9.98" />
        <circle class="dot-12" cx="1102.87" cy="85.35" r="9.98" />
    </g>
</svg>

Кстати, в SVG есть атрибут, называемый pathLength, который можно установить вручную, например, pathLength=" "`.

С CSS -Трюки

Это ничего не делает само по себе (насколько я знаю). Это не так, как только dr aws часть пути - все равно dr aws все это похоже на то, как если бы вы ничего не делали, только теперь "математика" длины пути основана на значении 1.

Теперь мы можем установить значение stroke-dasharray равным 1 и анимируйте смещение в CSS!

Например, 

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

. Вы можете значительно уменьшить количество повторений в CSS.

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...