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.

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

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

История

Элементы анимации SVG были разработаны в сотрудничестве с рабочей группой, опубликовавшей несколько версий языка синхронизированной интеграции мультимедиа (SMIL). Рабочая группа SYMM (совместно с рабочей группой SVG) разработала спецификацию анимации SMIL, которая представляет собой набор функций анимации XML общего назначения . SVG включает в себя функции анимации, определенные в спецификации анимации SMIL, и предоставляет некоторые расширения, специфичные для 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

<?xml версия="1.0" кодировка="UTF-8" автономный="да"?><svg версия= "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> <circle cx= "0" cy= "1" r= "2" stroke= "red" fill= "none" >      <animateTransform attributeName = "преобразование" attributeType = "XML" тип = "поворот" от = "0" к = "360" длительности = "1с" repeatCount= "неопределенно" /> </круг></svg>

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

<?xml версия="1.0" кодировка="UTF-8" автономный="да"?><svg версия= "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> <стиль> @keyframes  rot_kf  { из  {  преобразование:  поворот(0град);  } для  {  преобразовать:  повернуть(360 градусов);  } } .rot  {  анимация:  rot_kf  1с  линейная  бесконечность;  } </стиль> <circle class= "гниль"   cx= "0" cy= "1" r= "2" stroke= "blue" fill= "none" />    </svg>

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

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

<?xml версия="1.0" кодировка="UTF-8" автономный="да"?><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  с использованием  ECMAScript </title> <скрипт> функция  поворота(evt)  { константный  объект  =  evt.target.ownerDocument.getElementById('rot'); установитьИнтервал(()  =>  { константа  сейчас  =  новая  Дата(); константа  миллисекунды  =  now.getTime()  %  1000; const  градусы  =  миллисекунды  *  0,36;  //  360  градусов  за  1000  мс object.setAttribute('transform',  `rotate(${degrees})`); },  20); } </скрипт> <circle id= "гниль"   cx= "0" cy= "1" r= "2" stroke= "зеленый" fill= "нет" />    </svg>

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

<?xml версия="1.0" кодировка="UTF-8" автономный="да"?><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  с использованием  requestAnimationFrame() </title> <скрипт> пусть  возражают;  функция  инициализации()  { объект  =  документ.getElementById('rot');  window.requestAnimationFrame(поворот); }  функция  поворота (временная метка)  { константа  миллисекунды  =  временная метка  %  1000; const  градусы  =  миллисекунды  *  0,36;  //  360  градусов  за  1000  мс object.setAttribute('transform',  `rotate(${degrees})`); window.requestAnimationFrame(поворот); } </скрипт> <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Значение по умолчанию — 'auto'. Реализация должна сопоставить 'attribute Name' с атрибутом для целевого элемента. Реализация должна сначала выполнить поиск в списке свойств CSS для соответствующего имени свойства, и если ничего не найдено, выполнить поиск в пространстве имен XML по умолчанию для элемента.

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

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

Библиотеки

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

Смотрите также

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

Ссылки

1. "Scalable Vector Graphics (SVG) 1.1 Specification". World Wide Web Consortium . Январь 2003 г. – Апрель 2009 г. Архивировано из оригинала 27 августа 2006 г. Получено 4 февраля 2010 г.
2. Феста, Пол (9 января 2003 г.). "W3C выпускает стандарт сценариев, предостережение". CNet . Архивировано из оригинала 17 мая 2011 г. Получено 24 февраля 2010 г.
3. Бултерман, DCA ; Ллойд Ратледж (ноябрь 2008 г.). SMIL 3.0: Интерактивные мультимедиа для Интернета, мобильных устройств и говорящих книг Daisy. X.media.publishing (2-е изд.). Нью-Йорк: Springer. стр. 508. ISBN 9783540785460. Архивировано из оригинала 2022-04-24 . Получено 2022-04-24 .
4. Дик Бултерман . SMIL 3.0. Архивировано из оригинала 2022-04-24 . Получено 2022-04-24 .
5. "Поддержка анимации SVG в Amaya". World Wide Web Consortium . 15 апреля 2003 г. Архивировано из оригинала 11 сентября 2009 г. Получено 4 февраля 2010 г.
6. McCathieNevile, Charles (31 октября 2006 г.). "Анимация SVG". Сообщество разработчиков Opera . Программное обеспечение Opera . Архивировано из оригинала 7 марта 2010 г. Получено 24 февраля 2010 г.
7. "SVG-анимация с помощью SMIL". 29 марта 2011 г. Архивировано из оригинала 30 апреля 2011 г. Получено 29 марта 2011 г.
8. «Когда я могу использовать анимацию SVG SMIL?». Архивировано из оригинала 2011-03-22 . Получено 2011-03-29 .
9. Dahlström, Erik (август 2008 г.). "Tricks of javascript, SVG and SMIL". Opera Software на сайте "SVG Open". Архивировано из оригинала 6 апреля 2009 г. Получено 24 февраля 2010 г.
10. "W3C Synchronized Multimedia Home page". www.w3.org . Архивировано из оригинала 2022-04-17 . Получено 2022-03-20 .
11. Hoschka, Philipp, ed. (1998-06-15). "Synchronized Multimedia Integration Language (SMIL) 1.0 Specification". W3C . Рабочая группа SYMM. Архивировано из оригинала 2021-03-30 . Получено 2021-04-09 .
12. Худайри, Салли; Джейкобс, Ян; Митчелл, Нед; Ллойд, Эндрю; Мацубара, Юмико (1998-06-15). "Пресс-релиз: W3C выпускает SMIL как рекомендацию W3C". W3C . Архивировано из оригинала 2020-02-08 . Получено 2021-04-09 .
13. Шмитц, Патрик; Ю, Джин; Сантанджели, Питер (18.09.1998). «Расширения интерактивного мультимедиа с синхронизацией для HTML (HTML+TIME); расширение SMIL в веб-браузер». World Wide Web Consortium (w3.org) . Архивировано из оригинала 20.01.2022 . Получено 20.03.2022 .
14. "Synchronized Multimedia Integration Language (SMIL 2.0)". www.w3.org . 7 августа 2001 г. Архивировано из оригинала 2022-03-26 . Получено 2022-03-20 .
15. Шмитц, Патрик; Коэн, Аарон (4 сентября 2001 г.). "SMIL Animation". www.w3.org . Архивировано из оригинала 2022-06-14 . Получено 2022-03-20 .