Анимация SVG немного уникальна тем, что есть три совершенно разных подхода к ее анимации.
1. Анимация с помощью CSS @keyframes
Элементы SVG можно настраивать и стилизовать с помощью CSS. Это означает, что вы можете применять анимацию через @keyframes. Так:
.left-leg ( fill: orange; animation: dance 2s infinite alternate; ) @keyframes dance ( 100% ( transform: rotate(3deg); ) )Вы можете выбрать такой способ анимации, если…
- Анимация довольно простая.
- Вам нужно только анимировать свойства, которые может анимировать CSS.
- Вы уже знакомы с CSS-анимацией и привыкли к ней.
2. Анимация с SMIL
Синтаксис анимации встроен прямо в SVG. Вот очень простой пример:
Вот большой учебник по SMIL.
Вы можете выбрать такой способ анимации, если…
- Вам нужно анимировать свойства, которые CSS не может, например, саму форму.
- Вам нужны другие специфические особенности SMIL, такие как начало анимации, когда заканчивается другая, без ручной синхронизации длительности / задержек. Или взаимодействие, например запуск анимации по щелчку.
3. Анимация с помощью JavaScript
С помощью JavaScript у вас есть доступ к таким вещам, как requestAnimationFrame (или другим циклам), поэтому вы можете анимировать просто путем быстрого изменения значений свойств. Существуют также фреймворки для работы с SVG, в которые обычно встроена анимация. Или фреймворки для анимации, которые работают с SVG. Как SnapSVG, GreenSock, SVG.js или Velocity.js.
Вот пример со SnapSVG:
var s = Snap("#robot"); var leftPupil = s.select("#left-pupil"); leftPupil.animate(( r: 50, fill: "lightgreen" ), 1000);Вы можете выбрать такой способ анимации, если…
- В любом случае вы работаете на JavaScript, возможно, ваша анимация связана с данными, которые вы получаете с помощью JSON или тому подобного.
- В любом случае вам нужен JavaScript, потому что вам нужна логика, математика или что-то еще, что действительно возможно только там.
- Вы заинтересованы в том, чтобы JavaScript решал некоторые ошибки за вас.
- Объем вашей анимации довольно велик / сложен, и вам нужна абстракция и организация, которые может предоставить JavaScript.
Демо
См. Статью Криса Койера (@chriscoyier) «Три способа анимации SVG» на CodePen.
Разве то, как вы в конечном итоге используете SVG, не влияет на ваши варианты?
Оно делает. Если вы используете SVG-as- , вы не сможете использовать CSS-анимацию из другой таблицы стилей. Но ваша анимация SMIL будет работать в некоторых браузерах (на момент написания этой статьи Chrome да, Firefox нет). Я не удивлюсь, если встроенный CSS в файлы SVG будет работать или когда-нибудь заработает. JavaScript, наверное, нет.
Если вы используете SVG в фоновом изображении CSS, я полагаю, что это аналогичная история, описанная выше.
Если вы используете встроенный , для вас открыты все возможности.
Если вы используете SVG через objectили iframe, вам нужно будет встроить скрипты / стили прямо в SVG, чтобы он работал.