keyTimes

« SVG Attribute reference home

Атрибут keyTimes представляет собой разделённый точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов values и определяет, когда оно используется в анимации. Каждое значение времени в списке keyTimes задаётся как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

Если указан список keyTimes, то в списке keyTimes должно быть ровно столько же значений, сколько в списке values .

Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.

Семантика списка keyTimes зависит от режима интерполяции:

• Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задаётся; значения являются интерполяцией между ключевыми моментами.
• Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задаётся; Функция анимации использует это значение до следующего времени, определённого в keyTimes.

Если в качестве режима интерполяции используется paced, атрибут keyTimes игнорируется.

Если в качестве параметра длительности выбрано indefinite, атрибут keyTimes игнорируется.

<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewPort="0 0 120 120"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      attributeType="XML"
      dur="4s"
      values="60 ; 110 ; 60 ; 10 ; 60"
      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
      repeatCount="indefinite" />

    <animate
      attributeName="cy"
      attributeType="XML"
      dur="4s"
      values="10 ; 60 ; 110 ; 60 ; 10 "
      keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
      repeatCount="indefinite" />
  </circle>
</svg>