2015-05-01 6 views
0

Я пытаюсь повернуть мое SVG изображение вдоль своей оси, что я могу успешно сделать с помощью следующего кода:Есть ли способ, чтобы задержать рестарт в SVG AnimateTransform

<animateTransform attributeName="transform" 
        type="rotate" 
        from="120 262.5 125" 
        to="0 262.5 125" 
        begin="2s" 
        dur="2s" 
        repeatCount="indefinite" 
/> 

Мой вопрос, является ли или нет это способ разрешить перезапуск анимации на секунду или два. Если параметр repeatCount установлен на неопределенный, он немедленно перезапускает его.

Заранее благодарен!

UPDATE

Я попытался код приведенной ниже, но это не совсем работает так, как мне нужно это. Он должен вращаться вокруг центральной оси svg, но приостанавливается примерно на секунду до перезапуска. Есть идеи?

FINAL UPDATE

На случай, если кто-нибудь увидит это в будущем поисках этого вопроса, я обеспечу, что я был в состоянии сделать, чтобы заставить его работать. Добавив id, изменив время начала и repeatCount, я смог получить повторяющееся вращение с задержкой между ними.

Вот код:

<animateTransform id="rotation" attributeName="transform" 
        type="rotate" 
        from="120 262.5 125" 
        to="0 262.5 125" 
        begin="2+rotation.end+2" 
        dur="2s" 
        repeatCount=1 
/> 

ответ

0

Try следующий код задается относительно конца анимации, таким образом ваша анимация всегда будет ждать вашего заданного времени

<animateTransform attributeName="transform" 
    type="rotate" 
    from="120 262.5 125" 
    to="0 262.5 125" 
    begin="0" 
    dur="2s" 
    repeatCount="indefinite" 
    keyTimes="0;0.75;1" 
    values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" 
/> 

здесь анимация начинается (здесь 4 сек) и снова начать воспроизведение ...

+0

Это не совсем исправление. Это создает небольшую задержку, но вращение полностью из-за удара. Может быть, если я немного сыграю с цифрами ... – jldavis76

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