<h1>SVG/SMIL-анимация: сравнение Linear, Paced и Discrete: </h1>

<svg width="100%" height="100%" viewBox="0 0 600 600" preserveAspectRatio="xMidYMin meet">
  <g id="graphics" font-size="30">
    <rect width="100%" height="100%" fill="lightyellow"/>
  <g>
    <circle cx="50" cy="100" r="100" fill="gray">
      <animate attributeName="cx" attributeType="XML" 
               begin="0;graphics.click"
               values="50;500;300;400;50" 
               dur="20s"
               calcMode="linear" />
      <animate attributeName="fill" attributeType="XML"  
               begin="0;graphics.click"
               dur="20s" 
               values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
               calcMode="linear" />
    </circle>
    <text x="50" y="100">linear</text>
  </g>
  <g>
    <circle cx="50" cy="300" r="100" fill="gray">
      <animate attributeName="cx" attributeType="XML" 
               begin="0;graphics.click"
               values="50;500;300;400;50" 
               dur="20s"
               calcMode="paced"/>
      <animate attributeName="fill" attributeType="XML"  
               begin="0;graphics.click"
               dur="20s" 
               values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
               calcMode="paced" />
    </circle>
    <text x="50" y="300">paced</text>
  </g>
  <g>
    <circle cx="50" cy="500" r="100" fill="gray">
      <animate attributeName="cx" attributeType="XML"  
               begin="0;graphics.click"
               values="50;500;300;400;50" 
               dur="20s"
               calcMode="discrete" />
      <animate attributeName="fill" attributeType="XML" 
               begin="0;graphics.click"
               dur="20s" 
               values="gray;darkred;red;cyan;lightcyan;green;purple;gray"
               calcMode="discrete" />
    </circle>
    <text x="50" y="500">discrete</text>
  </g>
  </g>
</svg>
<strong>Кликните по SVG-картинке, чтобы перезапустить анимацию.</strong>
<p>Атрибут SVG/SMIL <code>calcMode</code> для анимационного элемента определяет, как интерполировать между несколькими значениями в одной анимации.
</p>
<p>Линейная (<b>linear</b>) анимация (по умолчанию) делит поровну время между несколькими указанными значениями, и продвигается между каждыми ключевыми точками с постоянной скоростью. Так, если у вас 5 значений, время анимации делится на 4 перехода между каждой парой соседних значений. Вы можете задать другую разбивку времени атрибутом <code>keyTimes</code>, но каждый шаг всё равно будет интерполироваться линейно. Для <code>keyTimes</code> используется другой список, разделенный точками с запятой, с тем же количеством пунктов, что в списке <code>values</code>.  Первым значением времени должно быть 0, а последним &mdash;  1; остальные значения должны быть десятичными дробями (соответствующими такой части от общего времени анимации) в порядке возрастания.
</p>
<p>Равномерная (<b>paced</b>) анимация рассчитывает расстояние между всеми значениями, и делит время так, чтобы получить постоянную скорость изменения на всем протяжении анимации. Ключевые моменты времени игнорируются. Только некоторые типы анимации могут быть такими: цвета и простые числа/размеры. Нельзя сделать постоянной скорость изменения пути или штриховки, например, потому что нет однозначного способа определить &laquo;расстояния&raquo; между наборами значений. 
</p>
<p>Дискретная (<b>discrete</b>) анимация просто перескакивает с одного значения на другое. По умолчанию она проводит одинаковое время в каждом состоянии, но это можно изменить с помощью <code>keyTimes</code>. Обратите внимание, что, в отличие от линейной анимации, дискретная анимация из 5 значений образует 5 интервалов (а не 4). Значения <code>keyTimes</code> являются моментами начала каждой стадии, так что, если первое значение по-прежнему должно быть нулем, последнее может и не быть единицей.
</p>
<p>Сплайновая (<b>spline</b>) анимация (здесь не показана) позволяет менять скорость перехода между значениями. Время, отведенное на каждую стадию анимации, выделяется так же, как для линейной анимации. Атрибут <code>keySplines</code> задает функцию плавности для каждого перехода.</p>