как запустить анимацию в конце другой анимации? - PullRequest
Новая
       14

как запустить анимацию в конце другой анимации?

5 голосов
/ 24 января 2011

Я пытаюсь добиться постепенного исчезновения точки с белого на красный, а затем с белого на красный.

Это то, что у меня пока есть: 

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />

Я хочу вторую анимациючтобы начать, когда закончится первый, я знаю, что это возможно, я просто не могу понять это.

1 Ответ

7 голосов
/ 24 января 2011

Используя ваш пример, вот как: 

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
  xlink:href="#test" dur="2s" fill="freeze" />  
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
  begin="testies.end" dur="2s" fill="freeze" />

или как эквивалентная альтернатива без синтаксиса xlink:href: 

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
  <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
    dur="2s" fill="freeze" />  
  <animate attributeName="fill" from="" to="#ED1C24"
    begin="testies.end" dur="2s" fill="freeze" />
</circle>

Итак, просто добавьте id элементаВы хотите вызвать другую анимацию и добавить суффикс ".end".Вы также можете указать «.begin» для запуска в начале анимации или добавить смещение по времени, например, begin="someId.end+2s".

Также возможно использовать события для запуска анимации, синтаксис аналогичен: idсопровождаемый точкой и затем именем события и, возможно, смещением времени.См. Список событий, которые требуются в SVG 1.1 здесь (здесь применяется самый левый столбец с названием «Имя события»).

Если вы не боитесь спецификаций, см. полный синтаксис атрибута begin для всех деталей.

...