Задержка анимации SVG при каждом повторении

Я хотел бы добавить задержку на каждую итерацию цикла анимации SVG. Вот простой пример.Задержка анимации SVG при каждом повторении

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> 
 
    <circle cx="50" cy="50" r="15" fill="blue"> 
 
    <animate id="op" attributeType="CSS" attributeName="opacity" 
 
      from="1" to="0" dur="3s" repeatCount="indefinite" /> 
 
    </circle> 
 
</svg>

Использование begin только задерживает первой итерации, так есть способ отложить каждый итерации?

источник

2015-07-29 Ben Murden

Вы можете добавить событие end анимированного элемента SMIL в атрибут begin.
Кроме того, вы можете добавить несколько значений, разделенных ; к этому begin атрибута:

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> 
 
    <circle cx="50" cy="50" r="15" fill="blue"> 
 
    <animate id="op" attributeType="CSS" attributeName="opacity" 
 
      from="1" to="0" dur="3s" begin="3s;op.end+3s" /> 
 
    </circle> 
 
</svg>

источник

2015-07-29 03:55:48 Kaiido

Marvelous, спасибо! Сначала я был смущен, потому что я не понял, что это не работает с 'repeatCount'. –

ну, на самом деле 'repeatCount' по-прежнему активен, а событие' end' запускается в конце конечного 'repeatCount'. – Kaiido

Я полагаю, что я должен быть более конкретным и сказать, что анимация никогда не заканчивается, если у вас 'repeatCount =" неопределенный "' - событие 'end' никогда не достигается! Я не вижу конкретного упоминания о умолчанию по MDN, но я предполагаю, что он установлен в 1, если не определен. –

Я думаю, что вы ищете является добавка/накопительные атрибуты SVG. Это пример того, что я получил от css tricks

svg { 
 
    border: 3px solid #eee; 
 
    display: block; 
 
    margin: 1em auto; 
 
}

<svg width="500" height="100"> 
 
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> 
 

 
    <animate xlink:href="#orange-circle" attributeName="cx" from="0" to="100" additive="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" /> 
 
</svg>

На самом деле здесь лучше exaample (тот же источник)

svg { 
 
    border: 3px solid #eee; 
 
    display: block; 
 
    margin: 1em auto; 
 
}

<svg width="500" height="150"> 
 
    <style> 
 
    rect { 
 
     -moz-transform-origin: 75px 75px; 
 
     transform-origin: 50% 50%; 
 
    } 
 
    </style> 
 
    <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" /> 
 
    
 
    <animateTransform 
 
      xlink:href="#deepPink-rectangle" 
 
      attributeName="transform" 
 
      attributeType="XML" 
 
      type="rotate" 
 
      from="0 75 75" 
 
      to="360 75 75" 
 
      dur="2s" 
 
      begin="0s; 5s; 9s; 17s;" 
 
      end="2s; 8s; 15s; 25s;" 
 
      fill="freeze" 
 
      restart="whenNotActive" 
 
      /> 
 
    
 
</svg>

источник

2015-07-29 04:00:38

Спасибо за ваш ответ, но я не думаю, что это конкретно затрагивает вопрос. Мне нужна была задержка на неопределенное количество повторений, где эти примеры кажутся конечными. –

Определить фиктивную петлю и установите относительное время начала. См How to make SVG Loop Animation?

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> 
 
    <rect> 
 
    <animate id="o1" begin="0;o1.end" dur="10s" 
 
    attributeName="visibility" from="hide" to="hide"/> 
 
    </rect> 
 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
 
    <animate begin="o1.begin" 
 
    attributeName="cx" from="250" to="50" dur="5.05s"/> 
 
    </circle> 
 
    <circle fill="blue" cx="150" cy="100" r="50" /> 
 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
 
    <animate begin="o1.begin+5s" 
 
    attributeName="cx" from="50" to="250" dur="5.05s"/> 
 
    </circle> 
 
</svg>

источник

2015-07-29 07:12:05

Задержка анимации SVG при каждом повторении

ответ

Смежные вопросы