MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

« SVG Attribute reference home

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

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

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

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

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

Если режим интерполяции обрабатывается, атрибут keyTimes игнорируется.

Если длительность является неопределенной, любая спецификация keyTimes будет пропущена.

Usage context

Categories Animation value attribute
Value <list>
Animatable No
Normative document SVG 1.1 (2nd Edition)

Example

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

Live sample

Elements

The following elements can use the keyTimes attribute

Метки документа и участники

 Внесли вклад в эту страницу: Vasiliy.Poddubny
 Обновлялась последний раз: Vasiliy.Poddubny,