SVG-анимация

Анимация масштабируемой векторной графики , открытого на основе XML, стандартного формата векторной графики возможна различными способами:

• Сценарии : ECMAScript — это основное средство создания анимации и интерактивных пользовательских интерфейсов в SVG.
• Стилизация : с 2008 года разработка CSS-анимации как функции в WebKit сделала возможной неявную анимацию SVG-файлов на основе таблиц стилей из объектной модели документа (DOM).
• SMIL : Синхронизированный язык интеграции мультимедиа, рекомендуемое средство. анимации гипермедиа на основе SVG при поддержке Amaya (2003). Опера (2006), Мозилла Фаерфокс (2011 г.), Google Chrome (2016 г.) и Safari (2017 г.) Веб-браузеры , и любой браузер, который стремится пройти Acid3 тест веб-стандартов 2008 года (т.е. до «упрощения» теста в 2011 году), поскольку для этого требуется поддержка SMIL для тестов 75 и 76.

Библиотеки также были написаны как оболочка, обеспечивающая поддержку SMIL в современных браузерах с поддержкой SVG. Этот метод также известен как SVG+Time.

Поскольку SVG поддерживает переносимую сетевую графику (PNG) и растровые изображения JPEG , его можно использовать для анимации таких изображений в качестве альтернативы APNG и сетевой графике с несколькими изображениями (MNG).

История

Элементы анимации SVG были разработаны в сотрудничестве с рабочей группой, опубликовавшей несколько версий Synchronized Multimedia Integration Language (SMIL). Рабочая группа SYMM (в сотрудничестве с рабочей группой SVG) разработала спецификацию SMIL Animation, которая представляет собой набор функций XML- анимации общего назначения. SVG включает в себя функции анимации, определенные в спецификации SMIL Animation, и предоставляет некоторые расширения, специфичные для SVG.

В июне 1998 года «Рабочая группа по синхронизированному мультимедиа» (известная как «SYMM») ) в рамках Консорциума Всемирной паутины («W3C») опубликовала первую рекомендуемую версию спецификации, известную как «SMIL 1.0». Вскоре после публикации SMIL 1.0 в 1998 году группа компаний во главе с Microsoft опубликовала « Интерактивные мультимедийные расширения по времени для HTML (HTML+TIME); расширение SMIL в веб-браузере ». В течение следующих двух лет ведущий автор HTML+TIME (Патрик Шмитц) работал с рабочей группой SYMM, а также с рабочей группой SVG. Вскоре после публикации SMIL 2.0 Шмитц и соавтор Аарон Коэн (из Intel ) опубликовали SMIL Animation 4 сентября 2001 года. SVG 1.0 также стал рекомендацией W3C 4 сентября 2001 года.

Некоторые веб-браузеры добавили поддержку анимации SVG в 2000-х годах, включая Amaya еще в 2003 году, но анимация SVG поддерживалась только широко используемыми браузерами, начиная с 2010-х годов, особенно Firefox 4 (2011). Internet Explorer поддерживает анимацию ECMAScript, а его преемник Microsoft Edge поддерживает анимацию ECMAScript и CSS, начиная с версии 42.17134.

Примеры

Следующие фрагменты кода демонстрируют три метода создания анимированных изображений SVG в совместимых браузерах. Соответствующие части выделены желтым цветом. Нажмите на миниатюры изображений, чтобы просмотреть их анимированные версии.

SVG-анимация с использованием SMILE

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-4 -4 8 8">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="1" r="2" stroke="red" fill="none">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"
   to="360"
   dur="1s"
   repeatCount="indefinite"/>
 </circle>
</svg>

SVG-анимация с использованием CSS

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-4 -4 8 8">
 <title>SVG animation using CSS</title>
 <style>
  @keyframes rot_kf {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .rot { animation: rot_kf 1s linear infinite; }
 </style>
 <circle class="rot" 
  cx="0" cy="1" r="2" stroke="blue" fill="none"/>
</svg>

SVG-анимация с использованием ECMAScript.

Светофор, анимированный с использованием SVG-анимации и Javascript.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-4 -4 8 8" onload="rotate(evt)">
 <title>SVG animation using ECMAScript</title>
 <script>
  function rotate(evt) {
   const object = evt.target.ownerDocument.getElementById('rot');
   setInterval(() => {
     const now          = new Date();
     const milliseconds = now.getTime() % 1000;
     const degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
     object.setAttribute('transform', `rotate(${degrees})`);
    }, 20);
  }
 </script>
 <circle id="rot" 
  cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

Хотя приведенный выше пример работает, это не оптимальная реализация; анимация ограничена 50 кадрами в секунду (FPS). С использованием requestAnimationFrame обеспечивает лучшую производительность и может достигать 60 FPS:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-4 -4 8 8" onload="init()">
  <title>SVG animation using requestAnimationFrame()</title>
  <script>
    let object;
   
    function init() {
      object = document.getElementById('rot');     
      window.requestAnimationFrame(rotate);
    }
   
    function rotate(timestamp) {
      const milliseconds = timestamp % 1000;
      const degrees      = milliseconds * 0.36; // 360 degrees in 1000 ms
      object.setAttribute('transform', `rotate(${degrees})`);
      window.requestAnimationFrame(rotate);
    }
  </script>
  <circle id="rot" cx="0" cy="1" r="2" stroke="green" fill="none"/>
</svg>

Атрибуты SMIL для идентификации целевого атрибута

Ниже приведен атрибут анимации, который идентифицирует целевой атрибут для данного целевого элемента, значение которого меняется со временем. attributeName = "<attributeName>" указывает имя целевого атрибута. Префикс XMLNS может использоваться для указания пространства имен XML для атрибута. Префикс будет интерпретироваться в рамках текущего элемента анимации.

attributeType = "CSS | XML | auto" указывает пространство имен, в котором определены целевой атрибут и связанные с ним значения. CSS указывает, что значение «attributeName» — это имя свойства CSS, определенного в этой спецификации как анимируемое. XML указывает, что значение 'attributeName' является именем атрибута XML, определенного в пространстве имен XML по умолчанию для целевого элемента. В этой спецификации атрибут должен быть определен как анимируемый. auto Значение по умолчанию — «авто». Реализация должна сопоставлять «Имя атрибута» с атрибутом целевого элемента. Реализация должна сначала выполнить поиск соответствующего имени свойства в списке свойств CSS, а если оно не найдено, выполнить поиск элемента в пространстве имен XML по умолчанию.

• 
  SMIL-анимация, демонстрирующая изменение трансформации (масштаба) и атрибутов CSS (непрозрачность и смещение штриха)
• 
  SMIL-анимация, демонстрирующая движение по траектории и 3D-симуляцию.
• 
  SMIL-анимация, демонстрирующая морфинг фигур (путей)
• 
  Анимация CSS3, демонстрирующая изменения в трансформации (вращение, масштабирование и перемещение) и моделировании 3D.

Программное обеспечение MediaWiki автоматически генерирует статические неанимированные миниатюры изображений SVG. При просмотре фактического изображения .svg на каждой соответствующей странице описания его анимация будет отображаться в совместимом браузере.

Библиотеки

Существует несколько библиотек JavaScript для работы с анимацией SVG. Преимущество использования таких библиотек состоит в том, что они часто решают проблемы несовместимости в браузерах посредством абстракции . Примеры библиотек: Raphaël и Velocity.js.

См. также

• CSS-анимация
• D3.js
• Флэш-анимация
• GIF-анимация