Войти
| Масштабируемый Векторная графика | |
|---|---|
|
Анимация Scalable Vector Graphics, открытого формата XML, стандартного векторной графики, возможна различными способами:
Библиотеки также были написаны как прокладка, чтобы обеспечить поддержку SMIL в текущих браузерах с поддержкой SVG. Этот метод также известен как SVG + Time.
Поскольку SVG поддерживает растровые изображения Portable Network Graphics (PNG) и JPEG, его можно использовать для анимации таких изображений. в качестве альтернативы APNG и Сетевая графика с несколькими изображениями (MNG).
Элементы анимации SVG были разработаны в сотрудничестве с World Wide Web Consortium (W3C) Synchronized Multimedia Working Group, разработчики языка Synchronized Multimedia Integration Language, первая версия которого была опубликована в 1999 году. 4 сентября 2001 года SVG 1.0 стал Рекомендацией W3C. веб-браузеры добавили поддержку SVG-анимации в течение 2000-х годов, в том числе уже в 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 в совместимых браузерах. Соответствующие части выделены желтым.
1 2
1 2
1 2
Хотя приведенный выше пример работает, это не оптимальная реализация, анимация ограничена 50 кадрами в секунду (FPS). Использование requestAnimationFrameобеспечивает лучшую производительность и может достигать 60 кадров в секунду:
1 2
Ниже приведены атрибуты анимации, которые идентифицируют целевой атрибут для данного целевого элемента, значение которого изменяется с течением времени. attributeName = "указывает имя целевого атрибута. Префикс XMLNS может использоваться для указания пространства имен XML для атрибута. Префикс будет интерпретирован в рамках текущего элемента анимации.
attributeType = "CSS | XML | auto"указывает пространство имен, в котором определены целевой атрибут и связанные с ним значения. CSSуказывает, что значение «attributeName» - это имя свойства CSS, определенного в данной спецификации как анимируемое. XMLуказывает, что значение «attributeName» - это имя атрибута XML, определенного в пространстве имен XML по умолчанию для целевого элемента. В этой спецификации атрибут должен быть определен как анимируемый. автоЗначение по умолчанию - «авто». Реализация должна соответствовать «имени атрибута» атрибуту целевого элемента. Реализация должна сначала выполнить поиск в списке свойств CSS для соответствующего имени свойства, а если ничего не найдено, выполнить поиск элемента в пространстве имен XML по умолчанию.
Анимация SMIL, демонстрирующая изменение трансформации (масштаб) и атрибутов CSS (непрозрачность и смещение штриха)
Анимация SMIL, демонстрирующая движение по траектории и симуляцию 3D
Анимация SMIL, демонстрирующая изменение форм (контуров)
CSS3-анимация, демонстрирующая изменения в преобразовании (поворот, масштаб и перемещение) и имитацию 3D
Программное обеспечение wiki MediaWiki автоматически генерирует статические, неанимированные эскизы изображений SVG. Просмотр фактического изображения.svg с каждой соответствующей страницы описания покажет его анимацию в совместимом браузере.
Есть несколько библиотек JavaScript для работы с SVG-анимацией. Преимущество использования таких библиотек состоит в том, что эти библиотеки часто решают проблемы несовместимости в браузерах с помощью абстракции . Примеры библиотек включают Raphaël и Velocity.js
 | На Викискладе есть медиафайлы, связанные с SVG-анимацией. |
