Animación SVG retraso en cada repetición

Me gustaría añadir un retardo a cada iteración de un bucle de animación SVG. He aquí un ejemplo simple.

HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

Utilizando begin sólo retrasa la primera iteración, por lo que hay una manera de retrasar cada iteración?

InformationsquelleAutor Ben Murden | 2015-07-29

3 Kommentare

  1. 15

    Puede agregar el end caso de un SMIL animados elemento a la begin atributo.

    También, usted puede agregar múltiples valores, separados por ; a este begin atributo :

    HTML:

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
      <circle cx="50" cy="50" r="15" fill="blue">
        <animate id="op" attributeType="CSS" attributeName="opacity"
                 from="1" to="0" dur="3s" begin="3s;op.end+3s" />
      </circle>
    </svg>

    • Maravilloso, gracias! Yo estaba confundido al principio, porque no me había dado cuenta de que esto no funciona con repeatCount.
    • bueno, en realidad repeatCount todavía está activo y el end evento se desencadena al final de la finitos repeatCount.
    • Supongo que debería ser más específico y decir que la animación nunca termina si usted tiene repeatCount="indefinite" – el end evento es nunca llegó! No veo una mención específica de un defecto en el MDN, pero supongo que se pone a 1 si no se ha definido.
    • Bueno, en realidad se ignora si la duración se establece : especificaciones, pero sí si repeatCount se establece en indefinite, end no de fuego, nunca. Por eso dije «al final de la finito repeatCount«
  2. 2

    Definir ficticio bucle y establecer la hora de inicio relativa. Ver
    Cómo hacer SVG Bucle de la Animación?

    HTML:

    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
      <rect>
        <animate id="o1" begin="0;o1.end" dur="10s"
        attributeName="visibility" from="hide" to="hide"/>
      </rect>
      <circle fill="orange" cx="-50" cy="100" r="20">
        <animate begin="o1.begin" 
        attributeName="cx" from="250" to="50" dur="5.05s"/>
      </circle>
      <circle fill="blue" cx="150" cy="100" r="50" />
      <circle fill="orange" cx="-50" cy="100" r="20">
        <animate begin="o1.begin+5s" 
        attributeName="cx" from="50" to="250" dur="5.05s"/>
      </circle>
    </svg>

  3. 0

    Creo que lo que estás buscando es el aditivo/acumulativo de los atributos de la svg. Este es un ejemplo que recibí de trucos de css

    CSS:

    svg {
      border: 3px solid #eee;
      display: block;
      margin: 1em auto;
    }

    HTML:

    <svg width="500" height="100">
      <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
    
      <animate xlink:href="#orange-circle" attributeName="cx" from="0" to="100" additive="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" />
    </svg>

    De hecho aquí es una mejor exaample (misma fuente)

    CSS:

    svg {
      border: 3px solid #eee;
      display: block;
      margin: 1em auto;
    }

    HTML:

    <svg width="500" height="150">
      <style>
        rect {
          -moz-transform-origin: 75px 75px;
          transform-origin: 50% 50%;
        }
      </style>
      <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />
      
      <animateTransform 
               xlink:href="#deepPink-rectangle"
               attributeName="transform" 
               attributeType="XML"
               type="rotate"
               from="0 75 75"
               to="360 75 75" 
               dur="2s"
               begin="0s; 5s; 9s; 17s;"
               end="2s; 8s; 15s; 25s;"
               fill="freeze" 
               restart="whenNotActive"
               />
      
    </svg>

    • Gracias por tu respuesta, pero no creo que esto se refiere específicamente a la cuestión. Necesitaba un retraso en un número indefinido de repeticiones, donde estos ejemplos parecen ser finito.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea