12.4 Repeating Action

• If you want to have the object return to its pre-animation state, omit the attribute fill="freeze", which is equivalent to default setting fill="remove".
• Two other attributes allow you to repeat an animation.
  • The first of them, repeatCount, is set to an integer value telling how many times you want a particular animation to repeat.
  • The second, repeatDur, is set to a time telling how long the repetition should last.
• If you want an animation to repeat until the user leaves the page, set either repeatCount="indefinite" or repeatDur="indefinite".
• You will usually use only one of the two, not both.
• If you do specify both repeatCount and repeatDur, the one that specifies the end time that occurs first - will be used.

Example 1. Repeated animation

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000">
  <circle cx="60" cy="60" r="30" style="fill:none; stroke:red;">
    <animate
      attributeName="cx"
      attibuteType="XML"
      from="30" to="10"
      begin="0s" dur="5s" repeatCount="2";
      fill="freeze"/>
  </circle>
  <circle cx="260" cy="90" r="30" style="fill:#ccf; stroke:black;">
    <animate
      attributeName="cx"
      attibuteType="XML"
      from="260" to="60"
      begin="0s" dur="5s" repeatDur="8s"
      fill="freeze"/>
  </circle>
</svg>

Just as it is possible to synchronize an animation with the beginning or ending of another animation, you can tie the start of one animation to the start of a specific repetition of another animation. You give the first animation an id, and then set the begin of the second animation to id.repeat(count), where count is a number beginning at 0 for the first repetition. Example 12-7 shows an upper circle moving from left to right three times, requiring 5 seconds for each repetition. The lower square will go right to left only once, and will not begin until halfway through the second repetition.

Example 2. Synchronizing an animation with a repetition

<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000">
        <circle cx="60" cy="60" r="15"
            style="fill: none; stroke: red;">
            <animate id="circleAnim"
                     attributeName="cx"
                     attributeType="XML"
                     begin="0s" dur="5s" repeatCount="3"
                     from="60" to="260"
                     fill="freeze"/>
        </circle>
        <rect x="230" y="80" width="30" height="30"
            style="fill: #ccf; stroke: black;">
            <animate
                    attributeName="x"
                    attributeType="XML"
                    begin="circleAnim.repeat(1)+2.5s" dur="5s"
                    from="230" to="30"
                    fill="freeze"/>
        </rect>
    </svg>