SVG анимация - SVG animation

Масштабируемая векторная графика
	sXBL; Рабочая группа SVG; Эффекты фильтра SVG; Язык разметки точной графики; Язык векторной разметки; XHTML + MathML + SVG; SVG анимация; Сравнение компоновки двигателей (SVG);

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

Сценарии: ECMAScript является основным средством создания анимации и интерактивных пользовательских интерфейсов в SVG.
Укладка: С 2008 года разработка CSS анимации как особенность в WebKit сделал возможным управляемую таблицами стилей неявную анимацию файлов SVG изнутри Объектная модель документа (ДОМ).
SMIL: Синхронизированный язык интеграции мультимедиа, рекомендуемое средство^[1]^[2]^[3] анимации на основе SVG гипермедиа при поддержке Amaya (2003)^[4] Опера (2006),^[5] Mozilla Firefox (2011),^[6] Гугл Хром (2016) и Сафари (2017) веб-браузеры,^[7] и любой браузер, который стремится передать Кислота3 веб-стандарты тест 2008 года (т.е. до «упрощения» теста в 2011 году), поскольку для этого требуется поддержка SMIL для тестов 75 и 76.

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

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

История

Элементы анимации SVG были разработаны в сотрудничестве с Консорциум World Wide Web (W3C) Synchronized Multimedia Working Group, разработчики Синхронизированный язык интеграции мультимедиа, первая версия которого была опубликована в 1999 году. SVG 1.0 стал Рекомендация W3C 4 сентября 2001 г. веб-браузеры добавлена поддержка SVG-анимации в 2000-х, в том числе Amaya еще в 2003 году, но анимация SVG поддерживалась только широко используемыми браузерами, начиная с 2010-х годов, в частности Firefox 4 (2011). Internet Explorer поддерживает анимацию ECMAScript и ее преемника Microsoft Edge поддерживает анимацию ECMAScript и CSS начиная с версии 42.17134.

Рабочая группа SYMM в сотрудничестве с рабочей группой SVG разработала^{[год нужен ]} спецификацию SMIL Animation, которая представляет собой универсальный XML набор функций анимации. SVG включает в себя функции анимации, определенные в спецификации SMIL Animation, и предоставляет некоторые специфичные для SVG расширения.

Примеры

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

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

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  версия ="1.1" xmlns ="http://www.w3.org/2000/svg" xmlns: xlink ="http://www.w3.org/1999/xlink" 3  ширина ="100%" высота ="100%" viewBox ="-4 -4 8 8"> 4  <title>SVG-анимация с использованием SMIL</title> 5  <круг cx ="0" cy ="1" r ="2" ход ="красный" fill ="никто"> 6    7    attributeName ="преобразовать" 8    attributeType ="XML" 9    type ="вращать"10    от ="0"11    to ="360"12    begin =«0с»13    dur =«1сек»14    repeatCount ="неопределенный"/>15  </circle>16 </svg>

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

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  версия ="1.1" xmlns ="http://www.w3.org/2000/svg" xmlns: xlink ="http://www.w3.org/1999/xlink" 3  ширина ="100%" высота ="100%" viewBox ="-4 -4 8 8"> 4  <title>SVG-анимация с использованием CSS</title> 5  <стиль type ="текст / CSS"> 6   @keyframes rot_kf {из {преобразование: поворот (0 градусов); } 7                       чтобы {преобразовать: повернуть (360 градусов); }} 8   .rot {анимация: rot_kf 1s линейная бесконечность; } 9  </style>10  <круг class ="гнить" 11   cx ="0" cy ="1" r ="2" ход ="синий" fill ="никто"/>12 </svg>

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

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  версия ="1.1" xmlns ="http://www.w3.org/2000/svg" xmlns: xlink ="http://www.w3.org/1999/xlink" ширина ="100%" высота ="100%" viewBox ="-4 -4 8 8"  3  onload ="повернуть (evt)"> 4  <title>SVG-анимация с использованием ECMAScript</title> 5  <сценарий type ="текст / ecmascript"> 6   function rotate (evt) { 7    var object = evt.target.ownerDocument.getElementById ('гниль'); 8    setInterval (function () { 9      var now = новая дата ();10      var миллисекунды = now.getTime ()% 1000;11      вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс12      object.setAttribute ('преобразование', 'поворот (' + градусы + ')');13     }, 20);14   }15  </script>16  <круг id ="гнить"17   cx ="0" cy ="1" r ="2" ход ="зеленый" fill ="никто"/>18 </svg>

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

 1 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 2  версия ="1.1" xmlns ="http://www.w3.org/2000/svg" xmlns: xlink ="http://www.w3.org/1999/xlink" ширина ="100%" высота ="100%" viewBox ="-4 -4 8 8"  3  onload ="в этом()"> 4   <title>SVG-анимация с использованием requestAnimationFrame ()</title> 5   <script> 6     var объект; 7  8     function init () { 9       объект = документ.getElementById ('гниль'); 10       window.requestAnimationFrame (поворот);11     }12 13     функция rotate (timestamp) {14       var миллисекунды = отметка времени% 1000;15       вар градусов = миллисекунды * 0,36; // 360 градусов за 1000 мс16       object.setAttribute ('преобразование', 'поворот (' + градусы + ')');17       window.requestAnimationFrame (поворот);18     }19   </script>20   <круг id ="гнить" cx ="0" cy ="1" r ="2" ход ="зеленый" fill ="никто"/>21 </svg>

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

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

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

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

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

Библиотеки

Для работы с SVG-анимацией существует несколько библиотек JavaScript. Преимущество использования таких библиотек заключается в том, что эти библиотеки часто решают проблемы несовместимости в браузерах с помощью абстракция. Примеры библиотек включают Рафаэль и Velocity.js

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

использованная литература

^ «Спецификация масштабируемой векторной графики (SVG) 1.1». Консорциум World Wide Web. Январь 2003 г. - апрель 2009 г.. Получено 4 февраля 2010. Цитировать журнал требует | журнал = (Помогите)CS1 maint: формат даты (ссылка на сайт)
^ Феста, Пол (9 января 2003 г.). «W3C выпускает стандарт сценариев, предостережение». CNet. Получено 24 февраля 2010.
^ Бултерман, Д.С.А.; Ллойд Ратледж (ноябрь 2008 г.). SMIL 3.0: интерактивные мультимедиа для Интернета, мобильных устройств и книг Daisy Talking. X.media.publishing (2-е изд.). Нью-Йорк: Нью-Йорк: Спрингер. п. 508. ISBN 978-3-540-78546-0.
^ «Поддержка SVG Animation в Amaya». Консорциум World Wide Web. 15 апреля 2003 г.. Получено 4 февраля 2010.
^ Маккэти Невил, Чарльз (31 октября 2006 г.). "Анимация вашего SVG". Сообщество разработчиков Opera. Программное обеспечение Opera. Архивировано из оригинал 7 марта 2010 г.. Получено 24 февраля 2010.
^ «SVG-анимация с SMIL». 29 марта 2011 г.
^ "Когда я могу использовать анимацию SVG SMIL?".
^ Дальстрем, Эрик (август 2008 г.). «Уловки javascript, SVG и SMIL». Программное обеспечение Opera в SVG Открыть. Получено 24 февраля 2010.

внешняя ссылка

[1] «Спецификация масштабируемой векторной графики (SVG) 1.1». Консорциум World Wide Web. Январь 2003 г. - апрель 2009 г.. Получено 4 февраля 2010. Цитировать журнал требует | журнал = (Помогите)CS1 maint: формат даты (ссылка на сайт)

[2] Феста, Пол (9 января 2003 г.). «W3C выпускает стандарт сценариев, предостережение». CNet. Получено 24 февраля 2010.

[3] Бултерман, Д.С.А.; Ллойд Ратледж (ноябрь 2008 г.). SMIL 3.0: интерактивные мультимедиа для Интернета, мобильных устройств и книг Daisy Talking. X.media.publishing (2-е изд.). Нью-Йорк: Нью-Йорк: Спрингер. п. 508. ISBN 978-3-540-78546-0.

[4] «Поддержка SVG Animation в Amaya». Консорциум World Wide Web. 15 апреля 2003 г.. Получено 4 февраля 2010.

[5] Маккэти Невил, Чарльз (31 октября 2006 г.). "Анимация вашего SVG". Сообщество разработчиков Opera. Программное обеспечение Opera. Архивировано из оригинал 7 марта 2010 г.. Получено 24 февраля 2010.

[6] «SVG-анимация с SMIL». 29 марта 2011 г.

[7] "Когда я могу использовать анимацию SVG SMIL?".

[8] Дальстрем, Эрик (август 2008 г.). «Уловки javascript, SVG и SMIL». Программное обеспечение Opera в SVG Открыть. Получено 24 февраля 2010.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

Масштабируемая векторная графика
sXBL Рабочая группа SVG Эффекты фильтра SVG Язык разметки точной графики Язык векторной разметки XHTML + MathML + SVG SVG анимация Сравнение компоновки двигателей (SVG)