關鍵樣條

keySplines 屬性定義了一組與 keyTimes 列表相關聯的貝塞爾曲線控制點，定義了一個控制間隔節奏的三次貝塞爾函式。

除非將 calcMode 屬性設定為 spline，否則將忽略此屬性。

如果 keySplines 規範中存在任何錯誤（值無效、值過多或值過少），動畫將不會發生。

你可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

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>