SVGのアニメーションでイージングを設定する

SVGのanimate属性でアニメーションの設定をする際、イージングの指定ができるようだったのでメモ。

サンプルコード

イージングの設定はcalcMode属性をsplineにした上で、keySplines属性を使って指定できます。

<svg width="300" height="500" viewBox="0 0 300 500">
  <!-- 設定前 -->
  <circle cx="20" cy="50" r="10" fill="red">
    <animate
      attributeName="cx" attributeType="XML"
      from="20" to="220" dur="2s"
      repeatCount="indefinite" />
  </circle>

  <!-- イージングが設定効かない場合 -->
  <circle cx="20" cy="100" r="10" fill="blue">
    <animate
      attributeName="cx" attributeType="XML"
      from="20" to="220" dur="2s"
      calcMode="spline"
      keySplines="0.550, 0.085, 0.680, 0.530"
      repeatCount="indefinite" />
  </circle>

  <!-- イージングが設定できた場合 -->
  <circle cx="20" cy="150" r="10" fill="green">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.550, 0.085, 0.680, 0.530"
      repeatCount="indefinite" />
  </circle>
</svg>

ただ、fromとtoで開始地点と終了地点を指定している場合はうまく効かず、valuesとkeyTimesを使って指定の場合は効くようでした。
イージング設定のデモページ

イージング設定をいくつか試してみます。

<svg width="300" height="500" viewBox="0 0 300 500">
  <!-- 設定前 -->
  <circle cx="20" cy="50" r="10" fill="red">
    <animate
      attributeName="cx"
      dur="2s"
      values="20; 220"
      keyTimes="0; 1"
      repeatCount="indefinite" />
  </circle>

  <!-- linear -->
  <circle cx="20" cy="100" r="10" fill="blue">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.250, 0.250, 0.750, 0.750"
      repeatCount="indefinite" />
  </circle>

  <!-- easeInQuad -->
  <circle cx="20" cy="150" r="10" fill="green">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.550, 0.085, 0.680, 0.530"
      repeatCount="indefinite" />
  </circle>

  <!-- easeOutCubic -->
  <circle cx="20" cy="200" r="10" fill="orange">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.215, 0.610, 0.355, 1.000"
      repeatCount="indefinite" />
  </circle>

  <!-- easeInOutQuart -->
  <circle cx="20" cy="250" r="10" fill="purple">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.770, 0.000, 0.175, 1.000"
      repeatCount="indefinite" />
  </circle>

  <!-- easeOutBack(動作しない) -->
  <circle cx="20" cy="300" r="10" fill="pink">
    <animate
      attributeName="cx"
      dur="2s"
      calcMode="spline"
      values="20; 220"
      keyTimes="0; 1"
      keySplines="0.175, 0.885, 0.320, 1.275"
      repeatCount="indefinite" />
  </circle>
</svg>

keySplinesで使用する値は0〜1の範囲内である必要があるため、最後のeaseOutBackに関してはイージングの設定が効きません(アニメーションが実行されない)。
イージング設定のデモページ2