Как реализовать паузы между повторениями анимаций

Question

У меня есть картинка звезды:

Вот её svg код:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
         width="200" height="200" viewBox="0 0 200 200">
    <path d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="blue" fill="darkblue" stroke-width="4" />
</svg>

Мне необходимо сделать повторяющуюся анимацию с паузами между повторениями анимаций

анимация звезды после клика:

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
         width="300" height="300" viewBox="0 0 300 300" style="border:1px solid" >
        
    <path transform="scale(0.35)" d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="blue" fill="darkblue" stroke-width="4" >
    
    <animateTransform id="an"
       attributeName="transform"
       type="translate"
       begin="svg1.click"
       dur="3s"
       restart="whenNotActive"
       fill="freeze"
       values="0,0;650,650;0,0"
       repeatCount="indefinite"
       additive="sum"
       />
    </path>
</svg>

У меня получилось сделать цикличную анимацию, но я не знаю как реализовать паузы

Answer 1

Реализация паузы достигается с помощью условия:

begin="svg1.click;an.end+1s", где

svg1.click - первый запуск анимации после клика
an.end+1s - второй запуск, через одну секунду этой же анимации после её окончания в первый раз

Обратите внимание,
что в этом случае нельзя ставить repeatCount="indefinite"так как анимация будет крутится бесконечно и условие an.end никогда не будет выполнено.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" 
         width="300" height="300" viewBox="0 0 300 300" style="border:1px solid blue" >
        
    <path transform="scale(0.35)" d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="blue" fill="darkblue" stroke-width="4" >
    
    <animateTransform id="an"
       attributeName="transform"
       type="translate"
       begin="svg1.click;an.end+1s"
       dur="3s"
       restart="whenNotActive"
       fill="freeze"
       values="0,0;650,650;0,0"
       repeatCount="1"
       additive="sum"
       />
    </path>
</svg>

Answer 2

Реализовать паузу между анимациями можно также и с добавлением второй анимации, которая по факту не будет ничего анимировать, но ее продолжительность будет служить паузой для первой (основной) анимации. После выполнения этой второй анимации снова будет запущена первая анимация. И так поочередно. И в этом случае также нельзя ставить repeatCount="indefinite".

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" style="border:1px solid">
        
    <path transform="scale(0.35)" d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="blue" fill="darkblue" stroke-width="4" >
    
    <!--Добавляем вторую анимацию-->
    <animateTransform begin="an.end" id="pause" dur="2s" type="translate" values="" attributeName="transform"/>
    
    <animateTransform id="an"
       attributeName="transform"
       type="translate"
       begin="svg1.click;pause.end"
       dur="3s"
       restart="whenNotActive"
       fill="freeze"
       values="0,0;650,650;0,0"
       repeatCount="1"
       additive="sum"
       />
    </path>
</svg>

БЛОГ НА HUSL

Как реализовать паузы между повторениями анимаций

Ответы (2 шт):