Анімація 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, які зазвичай мають вбудовані матеріали для анімації. Як 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.
Демо
Дивіться «Ручка три способи анімації SVG» Кріса Койєра (@chriscoyier) на CodePen.
Чи не впливає в кінцевому підсумку використання SVG на ваші варіанти?
Це робить. Якщо ви використовуєте SVG-as- , ви не зможете використовувати анімації CSS з іншої таблиці стилів. Але, ви SMIL-анімація працюватиме в деяких браузерах (на момент написання статті Chrome так, Firefox ні). Я не був би здивований, якщо вбудований CSS у файли SVG працює або буде працювати одного дня. JavaScript, мабуть, ні.
Якщо ви використовуєте SVG у фоновому зображенні CSS, я думаю, це подібна історія, як вище.
Якщо ви використовуєте вбудований , всі можливості відкриті для вас.
Якщо ви використовуєте SVG через objectабо iframe, вам потрібно буде вбудувати сценарії / стилі прямо в SVG, щоб він працював.