keySplines

Атрибут keySplines определяет набор кривых Безье управляющих точек, связанных со списком keyTimes, определяя кубическую функцию Безье, которая управляет темпом интервалов.

Этот атрибут игнорируется, если атрибут calcMode не установлен в значение spline.

Если в спецификации keySplines есть ошибки (неправильные значения, слишком много или слишком мало значений), анимация не выполнится.

Вы можете использовать этот атрибут со следующими элементами SVG:

Пример

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      calcMode="spline"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
      keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
    <animate
      attributeName="cy"
      dur="4s"
      calcMode="spline"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
      keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1" />
  </circle>
</svg>

Примечания по использованию

Значение	`<control-point>` [ `;` `<control-point>` ]* `;`?
Значение по умолчанию	Нет
Анимируемо	Нет

Значение атрибута представляет собой список описаний контрольных точек, разделенных точкой с запятой.

<control-point>

Каждое описание контрольной точки — это набор из четырёх значений: x1 y1 x2 y2, описывающие контрольные точки Безье для одного временного сегмента. Значения keyTimes, определяющие связанный сегмент, являются «якорем» Безье, а значения keySplines — это контрольные точки. Таким образом, должно быть на одну группу контрольных точек меньше, чем у keyTimes.

Значения x1 y1 x2 y2 должны находиться в диапазоне от 0 до 1.

Проблемы с Safari

Значения keyTimes должны быть разделены точкой с запятой без пробела перед ней, например: keyTimes="0; 0.25; 0.5; 0.75; 1"

Спецификации

Спецификация
SVG Анимации уровень 2 # KeySplinesAttribute

См. также

Кривая Безье

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/keySplines