Как реализовать паузу в svg анимации

158
05 апреля 2019, 07:00

Как реализовать задержку в бесконечной анимации?

<svg> 
      <circle id="green" r="19" cx="50" cy="50" fill="green" fill-opacity=".82"/> 
      <animate 
              xlink:href="#green" 
              attributeName="r" 
              from="19" 
              to="30" 
              dur="3s" 
              begin="3s;green.end+5s"/> 
</svg>

Answer 1

Бесконечная анимация увеличения радиуса круга.

Достигается применением параметра repeatCount="indefinite"

Значение радиуса -values="19;30"

Начало анимации - клик по фигуре

<svg id="svg2"> 
      <circle id="green" r="19" cx="50" cy="50" fill="green"  fill-opacity=".82"/> 
      <animate id="anim-stroke" 
              xlink:href="#green" 
              attributeName="r" 
              values="19;30" 
              dur="5s" 
              begin="svg2.click" 
			  repeatCount="indefinite"/> 
</svg>
Анимация увеличения, уменьшения радиуса круга.

values="19;30;19"

<svg id="svg2"> 
      <circle id="green" r="19" cx="50" cy="50" fill="green"  fill-opacity=".82"/> 
      <animate id="anim-stroke" 
              xlink:href="#green" 
              attributeName="r" 
              values="19;30;19" 
              dur="5s" 
              begin="svg2.click" 
			  repeatCount="indefinite"/> 
</svg>

Пауза в начальном и конечном состоянии круга 

values="19;30;30;19;19"   


<svg id="svg2"> 
      <circle id="green" r="19" cx="50" cy="50" fill="green"  fill-opacity=".82"/> 
      <animate id="anim-stroke" 
              xlink:href="#green" 
              attributeName="r" 
              values="19;30;30;19;19" 
              dur="5s" 
              begin="svg2.click" 
			  repeatCount="indefinite"/> 
</svg>

Пауза достигается повторением в параметре values значений.

Арифметика простая: продолжительность всей анимации - 5 сек. Значит паузы будут по 1 сек.

READ ALSO
&ldquo;SyntaxError: super() is only valid in derived class constructors&rdquo;
javascript

“SyntaxError: super() is only valid in derived class constructors”

Не могу понять в чем проблема, подскажите пожалуйста

 161
Не добавлять уникальный объект [дубликат]
javascript

Не добавлять уникальный объект [дубликат]

На данный вопрос уже ответили:

 126
Метод Extend для примесей.Не понятен фрагмент с &ldquo;примешиванием&rdquo; замыканий вызывающие методы примесей
javascript

Метод Extend для примесей.Не понятен фрагмент с “примешиванием” замыканий вызывающие методы примесей

Не пойму кусок кода из статьи про примеси(mixin),там где "примешивают" замыканияКонкретно в строках 1 и 2 не понятно что происходит?Ссылка на статью...

 166
Вызов метода Nuxt из экземпляра класса
javascript

Вызов метода Nuxt из экземпляра класса

Сделал отдельным файлом конструктор класса с методами, его импортирую в компонент VueКак можно вызвать метод компонента Vue из класса, созданного...

 142