SVG-анимация

Стандартный формат векторной графики на основе Open XML

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

• Сценарии : ECMAScript — это основное средство создания анимации и интерактивных пользовательских интерфейсов в SVG.
• Стилизация : с 2008 года разработка CSS-анимации как функции в WebKit сделала возможной неявную анимацию SVG-файлов на основе таблиц стилей из объектной модели документа (DOM).
• SMIL : Синхронизированный язык интеграции мультимедиа, рекомендуемое средство ^{[1] [2] [3] [4]} анимации гипермедиа на основе SVG , поддерживается Amaya (2003) ^[5] Opera (2006), ^[6] Mozilla Firefox ( 2011), ^[7] Веб-браузеры Google Chrome (2016) и Safari (2017) , ^[8] и любой браузер, который стремится пройти тест веб-стандартов Acid3 2008 года (т. е. до «упрощения» теста в 2011 году), поскольку это требует Поддержка SMIL для тестов 75 и 76.

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

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

История

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

В июне 1998 года «Рабочая группа по синхронизированному мультимедиа» (известная как «SYMM» ^[10] ) в рамках Консорциума Всемирной паутины («W3C») опубликовала первую рекомендуемую версию спецификации, известную как «SMIL 1.0». ^{[11] [12]} Вскоре после публикации SMIL 1.0 в 1998 году группа компаний во главе с Microsoft опубликовала « Интерактивные мультимедийные расширения по времени для HTML (HTML+TIME); расширение SMIL в веб-браузере ». ^[13] В течение следующих двух лет ведущий автор HTML+TIME (Патрик Шмитц) работал с рабочей группой SYMM, а также с рабочей группой SVG. Вскоре после публикации SMIL 2.0 Шмитц и соавтор Аарон Коэн (из Intel ) опубликовали SMIL Animation 4 сентября 2001 года. ^{[14] [15]} 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-анимация с использованием SMIL

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"    ширина = "100%" высота = "100%" viewBox= "-4 -4 8 8" >   <title> SVG-  анимация  с использованием  SMIL </title> <круг cx= "0" cy= "1" r= "2" инсульт = "красный" fill = "нет" >      <аниматетрансформ имя_атрибута = "преобразование" тип атрибута = "XML" тип = "поворот" от = "0" до = "360" начало = "0 с" продолжительность = "1 с" повтореCount= "неопределенно" /> </круг></svg>

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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"    ширина = "100%" высота = "100%" viewBox= "-4 -4 8 8" >   <title> SVG-  анимация  с использованием  CSS </title> < тип стиля = "текст/css" >  @keyframes  rot_kf  { from  {  transform:  Rotate (0deg);  } в  {  преобразование:  поворот (360 градусов);  } } .rot  {  анимация:  rot_kf  1 с  линейная  бесконечность;  } </стиль> <круг класса = "гниль"   cx= "0" cy= "1" r= "2" Stroke= "blue" fill= "none" />    </svg>

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

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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" высота = "100%" viewBox= "-4 -4 8 8" onload= "rotate(evt)" >        <title> SVG-  анимация  с использованием  ECMAScript </title> < тип сценария = "текст/ecmascript" >  функция  Rotate(evt)  { var  object  =  evt.target.ownerDocument.getElementById('rot'); setInterval(функция  ()  { вар  сейчас  =  новая  дата(); вар  миллисекунды  =  now.getTime()  %  1000; вар  градусов  =  миллисекунды  *  0,36;  //  360  градусов  за  1000  мс object.setAttribute('transform',  'rotate('  +  градусов  +  ')'); },  20); } </скрипт> <circle id= "гниль"   cx= "0" cy= "1" r= "2" Stroke= "green" fill= "none" />    </svg>

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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" высота = "100%" viewBox= "-4 -4 8 8" onload= "init()" >        <title> SVG-  анимация  с использованием  requestAnimationFrame() </title> <скрипт> объект вар  ;  функция  инициализации()  { объект  =  document.getElementById('rot');  window.requestAnimationFrame(повернуть); }  функция  Rotate(метка времени)  { вар  миллисекунды  =  временная метка  %  1000; вар  градусов  =  миллисекунды  *  0,36;  //  360  градусов  за  1000  мс object.setAttribute('transform',  'rotate('  +  градусов  +  ')'); window.requestAnimationFrame(повернуть); } </скрипт> <circle id= "rot" cx= "0" cy= "1" r= "2" штрих= "зеленый" fill= "нет" />      </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-анимация

Рекомендации

1. «Масштабируемая векторная графика (SVG) 1.1 Спецификация» . Консорциум Всемирной паутины . Январь 2003 г. - апрель 2009 г. Архивировано из оригинала 27 августа 2006 г. Проверено 4 февраля 2010 г.
2. Феста, Пол (9 января 2003 г.). «W3C выпускает стандарт сценариев, предостережение». CNet . Архивировано из оригинала 17 мая 2011 года . Проверено 24 февраля 2010 г.
3. Балтерман, DCA ; Ллойд Ратледж (ноябрь 2008 г.). SMIL 3.0: Интерактивные мультимедиа для Интернета, мобильных устройств и говорящих книг. X.media.publishing (2-е изд.). Нью-Йорк: Спрингер. п. 508. ИСБН 9783540785460. Архивировано из оригинала 24 апреля 2022 г. Проверено 24 апреля 2022 г.
4. СМИЛ 3.0. Архивировано из оригинала 24 апреля 2022 г. Проверено 24 апреля 2022 г.
5. «Поддержка SVG-анимации в Amaya» . Консорциум Всемирной паутины . 15 апреля 2003 г. Архивировано из оригинала 11 сентября 2009 г. Проверено 4 февраля 2010 г.
6. МакКэтиНевил, Чарльз (31 октября 2006 г.). «Анимация вашего SVG». Сообщество разработчиков Opera . Программное обеспечение Опера . Архивировано из оригинала 7 марта 2010 года . Проверено 24 февраля 2010 г.
7. «SVG-анимация с SMIL» . 29 марта 2011 года. Архивировано из оригинала 30 апреля 2011 года . Проверено 29 марта 2011 г.
8. «Когда я могу использовать анимацию SVG SMIL?». Архивировано из оригинала 22 марта 2011 г. Проверено 29 марта 2011 г.
9. Дальстрем, Эрик (август 2008 г.). «Трюки JavaScript, SVG и SMIL». Программное обеспечение Opera на веб-сайте SVG Open. Архивировано из оригинала 6 апреля 2009 года . Проверено 24 февраля 2010 г.
10. «Домашняя страница синхронизированного мультимедиа W3C» . www.w3.org . Архивировано из оригинала 17 апреля 2022 г. Проверено 20 марта 2022 г.
11. Хошка, Филипп, изд. (15 июня 1998 г.). «Спецификация языка синхронизированной мультимедийной интеграции (SMIL) 1.0». W3C . Рабочая группа СИММ. Архивировано из оригинала 30 марта 2021 г. Проверено 9 апреля 2021 г.
12. Худаири, Салли; Джейкобс, Ян; Митчелл, Нед; Ллойд, Эндрю; Мацубара, Юмико (15 июня 1998 г.). «Пресс-релиз: W3C выпускает SMIL в качестве рекомендации W3C». W3C . W3C. Архивировано из оригинала 08 февраля 2020 г. Проверено 9 апреля 2021 г.
13. Шмитц, Патрик; Ю, Джин; Сантанджели, Питер (18 сентября 1998 г.). «Интерактивные мультимедийные расширения по времени для HTML (HTML+TIME); расширение SMIL в веб-браузер». Консорциум Всемирной паутины (w3.org) . Архивировано из оригинала 20 января 2022 г. Проверено 20 марта 2022 г.
14. «Язык синхронизированной интеграции мультимедиа (SMIL 2.0)» . www.w3.org . 7 августа 2001 г. Архивировано из оригинала 26 марта 2022 г. Проверено 20 марта 2022 г.
15. Шмитц, Патрик; Коэн, Аарон (4 сентября 2001 г.). «СМИЛ Анимация». www.w3.org . Архивировано из оригинала 14 июня 2022 г. Проверено 20 марта 2022 г.