comment faire pour démarrer une animation sur la fin d'une autre animation?

Je suis en train d'avoir un point de fondu de blanc, de rouge et puis du blanc au rouge.

C'est ce que j'ai à ce jour:

<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" />

Je veux la deuxième animation commence quand le premier se termine, je sais que c'est possible, je ne peux pas le comprendre.

InformationsquelleAutor Phil | 2011-01-24
  1. 7

    À l'aide de votre exemple, voici comment faire:

    <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" />

    ou comme une alternative sans le xlink:href syntaxe:

    <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>

    Donc, fondamentalement, il suffit d'ajouter l'id de l'élément que vous souhaitez déclencher l'autre animation à partir de, et ajouter un ".fin du suffixe. Vous pouvez également spécifier ".de commencer" pour déclencher le début de l'animation, ou ajouter un décalage de temps, e.g begin="someId.end+2s".

    Il est également possible d'utiliser les événements pour déclencher des animations, la syntaxe est similaire: id, suivi d'un point puis du nom de l'événement et éventuellement un décalage de temps. Voir la liste des événements qui sont nécessaires dans le SVG 1.1 ici (le plus à gauche de la colonne intitulée "nom de l'Événement" est ce qui s'applique ici).

    Si vous n'avez pas peur de spécifications, voir la syntaxe complète de l'attribut de commencer pour tous les détails.

    • Actuellement, cela ne fonctionne pas dans Chrome (34). EDIT: Mon erreur, fonctionne bien.
    • comment utiliser onrepeat attribut? pouvez-vous l'expliquer avec un exemple
    • dans cet exemple, le onrepeat attribut ne rien faire du tout.
    • est-il possible de reproduire ce comportement avec le javascript ?
    InformationsquelleAutor Erik Dahlström