SVG покадровая анимация (<g>) - PullRequest
Новая
       53

SVG покадровая анимация (<g>)

0 голосов
/ 04 ноября 2019

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

Что я сделал!
Я встречал этот пост в 2012 году, который показывает, как это сделать в SMIL, но я могу только заставить его работатьесли анимация имеет только 3 группы или кадры. Я также попытался использовать непрозрачность вместо отображения, однако непрозрачность дает неприятный эффект мерцания анимации (не знаю почему). И я понятия не имею, как я могу сказать ему отложить в конце, прежде чем он повторяет анимацию. Вот пример: https://jsfiddle.net/r0o459z8/

В итоге я сделал SVGAnimFrames , который хорошо работает в JS, за исключением того, что я вызываю его дважды на двух разных SVG. Скажем, первый вектор (заголовок), например, имеет больше кадров, чем второй (отскок), когда заголовок заканчивается и перезагружается, его отскок анимации больше не воспроизводится, поскольку переменная счетчика вызывается дважды для каждого и вызывается в SVGAnimFrames . Единственный способ, которым я могу придумать, - запустить их анимацию в iframe. На что я попытался и получил ошибку в консоли: « [Нарушение] Избегайте использования document.write () ».

Таким образом, мне нравится идея анимации SMIL, делающая это, таким образом, мой вопрос. ..

Как создать «Покадровая SVG-анимация» в SMIL, где она работает более 3-х кадров?

Если анимация SMIL невозможна, почему?

Что я могу сделать с SVGAnimFrames, где я могу вызвать более 1 svg для анимации и сделать так, чтобы их анимация влияла на другую (например, заголовок и / или отскок не воспроизводились после того, как заголовок завершил анимацию)? 

body {
  text-align: center;
  padding: 1em;
  background: rgb(71, 15, 89);
}
<svg style="isolation:isolate" viewBox="0 0 602.64 57.24">
  <g>
    <g>
      <path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
      <animate attributeName="display" values="inline;none;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
    <g>
      <path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
      <animate attributeName="display" values="none;inline;none;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
    <g>
      <path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
      <animate attributeName="display" values="none;none;inline;none;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
    <g>
      <path d=" M 17.568 57.24 L 17.568 57.24 Q 7.416 57.24 0.432 53.496 L 0.432 53.496 L 4.032 42.336 L 4.032 42.336 Q 11.448 45 17.28 45 L 17.28 45 L 17.28 45 Q 20.448 45 21.924 44.244 L 21.924 44.244 L 21.924 44.244 Q 23.4 43.488 23.4 41.976 L 23.4 41.976 L 23.4 41.976 Q 23.4 40.968 22.608 40.212 L 22.608 40.212 L 22.608 40.212 Q 21.816 39.456 19.44 38.52 L 19.44 38.52 L 19.44 38.52 Q 17.064 37.584 12.312 36.216 L 12.312 36.216 L 12.312 36.216 Q 6.48 34.488 3.24 30.564 L 3.24 30.564 L 3.24 30.564 Q 0 26.64 0 21.528 L 0 21.528 L 0 21.528 Q 0 13.608 5.22 9.54 L 5.22 9.54 L 5.22 9.54 Q 10.44 5.472 19.296 5.472 L 19.296 5.472 L 19.296 5.472 Q 23.904 5.472 28.368 6.444 L 28.368 6.444 L 28.368 6.444 Q 32.832 7.416 36.288 9.288 L 36.288 9.288 L 32.4 20.16 L 32.4 20.16 Q 28.368 18.792 25.38 18.18 L 25.38 18.18 L 25.38 18.18 Q 22.392 17.568 19.584 17.568 L 19.584 17.568 L 19.584 17.568 Q 14.832 17.568 14.832 20.16 L 14.832 20.16 L 14.832 20.16 Q 14.832 21.456 16.38 22.356 L 16.38 22.356 L 16.38 22.356 Q 17.928 23.256 22.752 24.624 L 22.752 24.624 L 22.752 24.624 Q 30.312 26.64 34.2 30.78 L 34.2 30.78 L 34.2 30.78 Q 38.088 34.92 38.088 40.68 L 38.088 40.68 L 38.088 40.68 Q 38.088 48.672 32.904 52.956 L 32.904 52.956 L 32.904 52.956 Q 27.72 57.24 17.568 57.24 L 17.568 57.24 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 55.008 56.088 L 40.32 6.552 L 56.592 6.552 L 64.224 37.44 L 71.856 6.552 L 88.848 6.552 L 73.368 56.088 L 55.008 56.088 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 115.488 57.24 L 115.488 57.24 Q 108.216 57.24 102.384 53.748 L 102.384 53.748 L 102.384 53.748 Q 96.552 50.256 93.24 44.208 L 93.24 44.208 L 93.24 44.208 Q 89.928 38.16 89.928 30.888 L 89.928 30.888 L 89.928 30.888 Q 89.928 23.904 93.276 18.072 L 93.276 18.072 L 93.276 18.072 Q 96.624 12.24 102.6 8.856 L 102.6 8.856 L 102.6 8.856 Q 108.576 5.472 116.208 5.472 L 116.208 5.472 L 116.208 5.472 Q 120.384 5.472 124.308 6.408 L 124.308 6.408 L 124.308 6.408 Q 128.232 7.344 131.4 9.072 L 131.4 9.072 L 126.648 20.232 L 126.648 20.232 Q 121.752 18.216 117.504 18.216 L 117.504 18.216 L 117.504 18.216 Q 111.96 18.216 108.936 21.78 L 108.936 21.78 L 108.936 21.78 Q 105.912 25.344 105.912 31.104 L 105.912 31.104 L 105.912 31.104 Q 105.912 34.848 107.28 37.836 L 107.28 37.836 L 107.28 37.836 Q 108.648 40.824 111.132 42.552 L 111.132 42.552 L 111.132 42.552 Q 113.616 44.28 116.784 44.28 L 116.784 44.28 L 116.784 44.28 Q 118.512 44.28 119.664 43.992 L 119.664 43.992 L 119.664 32.4 L 132.12 30.96 L 132.12 53.496 L 132.12 53.496 Q 123.984 57.24 115.488 57.24 L 115.488 57.24 Z " fill="rgb(235,235,235)"></path>
      <path d=" M 135.576 56.088 L 149.256 6.552 L 171.144 6.552 L 185.472 56.088 L 168.552 56.088 L 166.68 46.584 L 153.864 46.584 L 151.776 56.088 L 135.576 56.088 Z  M 155.376 37.728 L 164.952 37.728 L 160.272 16.056 L 155.376 37.728 Z " fill="rgb(235,235,235)"></path>
      <animate attributeName="display" values="none;none;none;inline;none" keyTimes="0;0.33;0.66;1" dur="1s" repeatCount="indefinite"></animate></g>
  </g>
</svg>

1 Ответ

0 голосов
/ 05 ноября 2019

до: 

detectFrame = counter++;
for (i = 0; i < totalFrames; i++) {

после: 

var detectFrame = counter++;
for (var i = 0; i < totalFrames; i++) {

Все, что мне нужно было сделать, чтобы решить проблему отсутствия анимацииболее чем один объект просто сбросил переменные внутри функции, выполняющей интервал, и это решило проблему.

...