JavaScript - это последний из способов, которые мы рассмотрим при анимации SVG. Мы рассмотрели CSS, который великолепен и довольно удобен, но он не может выполнять ряд свойств SVG, которые вы, возможно, захотите анимировать. Затем мы рассмотрели SMIL, который является декларативным синтаксисом прямо в самом коде SVG, который является более мощным в том смысле, что он может анимировать больше вещей, включая форму самого элемента.
JavaScript может делать все, что могут и те, и другие, и делать это хорошо. Это достигается либо за счет написания действительно сложного кода самостоятельно, либо за счет дополнительных расходов на библиотеку, которая поможет вам. Но как только вы начнете работать, синтаксис может быть действительно прекрасным и дружественным к анимации, а производительность на самом деле может быть на высшем уровне.
Еще одно преимущество использования JavaScript для SVG-анимации - это поддержка. При анимации SVG нужно учитывать множество причуд. Некоторые браузеры не поддерживают преобразования элементов. Некоторые браузеры делают странные вещи с масштабированием страницы. Некоторые из них несовместимы с трансформацией происхождения. Библиотеки JavaScript часто помогают решить эти проблемы.
Хотя мы говорим конкретно об анимации, многие библиотеки JavaScript SVG предназначены для работы с SVG в целом. Они могут создавать его и манипулировать им, получать доступ к свойствам элемента, изменять их и т. Д. Это вроде добавления более надежного API в SVG.
Snag.svg - «jQuery для SVG»
Базовый пример использования Snap.svg:
Смотрите Pen BhHix Криса Койера (@chriscoyier) на CodePen.
Еще одна вещь, которую мы сделали в этом видео с Snap.svg, - это преобразование этого CSS-анимации Pen в Snap.svg, научив нас, что мы можем использовать Snap.svg для работы со встроенным SVG, уже находящимся на странице. Компания Adobe сама собрала ряд примеров.
Raphael - более старая библиотека от того же создателя, что и Snap.svg
SVG.js - «Легкая библиотека для управления и анимации SVG». Вот демонстрация часов, на которую мы смотрели, показывая, как работают эти анимации, быстро манипулируя DOM.
D3.js - «D3.js - это библиотека JavaScript для управления документами на основе данных. D3 помогает оживить данные с помощью HTML, SVG и CSS ». Вот руководство по началу работы с SVG и еще одно введение в анимацию с его помощью.
GreenSock - «Сверхэффективная анимация профессионального уровня для современного Интернета». GreenSock - это анимация в Интернете в целом, но поддерживает SVG. Вот ручка, где вы можете увидеть, как это работает.
Velocity.js - «Ускоренная анимация JavaScript». Также библиотека об анимации в Интернете в целом, которая поддерживает SVG. Джулиан Шапиро создал его и написал о том, почему JavaScript-анимация на самом деле может быть наиболее производительным стилем анимации, а также о том, как работает Velocity.js. Вот очень простая демонстрация анимации некоторых свойств, специфичных для SVG.
Вы также можете сделать это самостоятельно с помощью анимации JavaScript без помощи фреймворка. Помните, что встроенный SVG находится в DOM, поэтому вам доступны все обычные DOM API. Как и вы, на самом деле не нужен jQuery для работы с DOM, он просто часто упрощает работу. Вот пример, который делает все по-своему, и это довольно интересно.