3
  1. атрибут restart равный always перезапускает анимацию в любое время:

<svg width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
 
<circle id='circ' r="50" cx="50" cy="50" fill="orange" />

<animate
xlink:href='#circ'
attributeName = 'cx'
restart='always'
from='50'
to='450'
dur='3s'
begin='click'
fill='freeze'

/>

  1. атрибут restart равный whenNotActive не перезапускает анимацию когда анимация работает:

<svg width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
     
    <circle id='circ' r="50" cx="50" cy="50" fill="orange" />

    <animate
    xlink:href='#circ'
    attributeName = 'cx'
    restart='whenNotActive'
    from='50'
    to='450'
    dur='3s'
    begin='click'
    fill='freeze'

    />
    </svg>

  1. Что происходит когда атрибут restart равен значению never?

  <svg width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
     
    <circle id='circ' r="50" cx="50" cy="50" fill="orange" />

    <animate
    xlink:href='#circ'
    attributeName = 'cx'
    restart='never'
    from='50'
    to='450'
    dur='3s'
    begin='click'
    fill='freeze'

    />
  </svg>    

1
  • never - никогда, ни разу
    – Arthur
    22 янв 2020 в 10:09

1 ответ 1

4

restart: never: Элемент не может быть перезапущен, пока не будет перезагружен его родительский контейнер. (В случае с SVG, так как родительским контейнером является SVG-фрагмент документа, то анимация не может быть перезапущена, пока не перезагружен документ). Другими словами пока не нажмете F5, не перегрузите браузер, не перезапустите приложение, - анимация не запустится повторно.

В примере ниже анимация жёлтого круга запускается по первому клику на холсте svg.
Анимация фиолетового круга запускается после окончания анимации желтого круга. begin="an1.end+1s"

Повторный клик будет проигнорирован. Ничего не произойдёт!

<svg id="svg1" width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
     
    <circle id='circ1' r="50" cx="50" cy="50" fill="orange" />

    <animate id="an1"
    xlink:href='#circ1'
    attributeName = 'cx'
	restart='never'
    from='50'
    to='450'
    dur='1s'
    begin='svg1.click'
	fill="freeze"
	  />
<circle id='circ2' r="50" cx="50" cy="200" fill="purple" />

    <animate id="an2"
    xlink:href='#circ2'
    attributeName = 'cx'
    from='50'
    to='450'
    dur='1s'
    begin='an1.end+0.5s'
    restart="whenNotActive" />
  </svg>

Потому что при повторном клике ни первая анимация, ни вторая анимация не запустится. Так как на первой стоит блокировка, а вторая анимация запускается только после окончания первой анимации.

Допустим нам нужен следующий сценарий:

  1. При первом клике начинает движение желтый круг
  2. Желтый круг заканчивает движение начинает движение фиолетовый круг
  3. При втором и последующих кликах желтый круг не реагирует (стоит на блокировке), а фиолетовый круг при каждом клике начинает движение

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

 <svg id="svg1" width="500" height="400" viewBox="0 0 500 400" style='border: 1px solid black;'>
     
    <circle id='circ1' r="50" cx="50" cy="50" fill="orange" />

   <!-- Анимация желтого круга   -->
  <animate id="an1"
    xlink:href='#circ1'
    attributeName = 'cx'
	restart='never'
    from='50'
    to='450'
    dur='1s'
    begin='svg1.click'/>
	
	<!-- Прокладка анимация, которая ничего не делает но помогает запустить -->
	<!-- анимацию фиолетового круга при повторных кликах  svg1.click -->
	<animate id="an2"
    xlink:href='#circ2'
    attributeName = 'cx'
	from='50'
    to='50'
    dur='0s'
    begin='an1.end;svg1.click'/>
	
	  <circle id='circ2' r="50" cx="50" cy="200" fill="purple" />
  <!-- Анимация фиолетового круга -->
    <animate id="an3"
    xlink:href='#circ2'
    attributeName = 'cx'
    from='50'
    to='450'
    dur='1s'
    begin="an2.end+0.5s"
	restart="whenNotActive"
	/>
  </svg>    

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.