Как автоматически перезапустить анимированную строку SVG после завершения? - PullRequest
Новая
       5

Как автоматически перезапустить анимированную строку SVG после завершения?

0 голосов
/ 15 мая 2018

У меня есть анимированная svg-строка с использованием css.

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

Это примермоего кода. 

line {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0 \0/;
    stroke-dashoffset: 0 \0/;
    -webkit-animation: draw 200s infinite;
    animation: draw 200s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

@keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}
<body>

<svg height="100" width="250">
  <line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>

</body>

Чтобы перезапустить анимацию, я изменил тег animation: 

-webkit-animation: draw 200s 2s infinite;
animation: draw 200s 2s infinite;

Однако, эффект, который я получил, был:

  • первый: строка заканчивается через две секунды.
  • Она начинается заново с желаемой продолжительностью (200 с).Однако после его завершения он не запускается снова сразу.

Как автоматически перезапустить анимацию после ее завершения.Нужно ли использовать javascript или jquery?

1 Ответ

0 голосов
/ 15 мая 2018

Проблема в том, что длительность вашей анимации установлена ​​на 200 с, поэтому в соответствии с вашим CSS она будет повторяться снова через 200 секунд и еще 2 секунды задержки. Из того, что я понимаю, вы хотите, чтобы линия рисовалась медленно, и поэтому вы используете анимацию 200 с, что не является лучшим способом для достижения этого - по крайней мере, не так, как вы хотите, чтобы анимация перезапускалась после небольшой задержки.

Вы можете замедлить линию, используя ease-in в сочетании с изменением анимации, как показано ниже. Это должно достичь желаемого эффекта, который вы ищете. 

line {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0 \0/;
    stroke-dashoffset: 0 \0/;
    -webkit-animation: draw 2s ease-in infinite;
    animation: draw 2s ease-in infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  99% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

@keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  99% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}
<body>

<svg height="100" width="250">
  <line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>

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

Нет похожих вопросов

...