Незважаючи на те, що анімація SVG за допомогою CSS може бути більш зручною для пересічного спеціаліста, у SVG є інший спосіб зробити анімацію вбудованою безпосередньо в синтаксис SVG. Саме це ми коротко висвітлюємо у цьому відео, але якщо ви хочете отримати повний довідковий посібник, неодмінно ознайомтесь з Посібником із анімації SVG (SMIL) Сари Суейдан прямо тут, на CSS-Tricks.
SMIL розшифровується як синхронізована мова мультимедійної інтеграції. Наскільки я розумію, це “річ”, яка сама по собі вбудовується у SVG. Але SVG має деякі власні доповнення, подібні до SMIL. Я просто буду називати це все SMIL, хоча я впевнений, що іноді я технічно невірний.
Для дуже простих анімацій не має великого значення, якщо ви робите це в SMIL або CSS, це буде робити те саме приблизно на однаковому рівні складності. Деякі речі можуть бути навіть простішими в CSS. Але ось деякі речі, де SMIL - це шлях:
- Вам потрібно анімувати те, чого CSS не може торкнутися. Як форма багатокутника чи контуру.
- Ви хочете використовувати події впливають на анімацію, подібно
clickабоmouseoverабо що - то. - Ви хочете робити адитивні анімації, наприклад, анімувати з будь-якого місця, де ви знаходитесь, ще x пікселів.
- Ви хочете мати анімацію, яка безпосередньо пов’язана з іншими анімаціями, наприклад, коли ця анімація закінчується, розпочинає наступну анімацію (без ручного керування тривалістю).
- Я впевнений, що їх є більше.
Спочатку синтаксис відчуває залякування, але я обіцяю це дуже просто. Ось основний приклад:
Дивіться Pen jAipI від Chris Coyier (@chriscoyier) на CodePen.
Річ "перетворення фігури" дійсно надзвичайно унікальна для SMIL, тому ось кращий приклад, ніж той дивний, який ми зробили у відео:
Дивіться кнопку «Pen Pen Shape Morph» від Кріса Койєра (@chriscoyier) на CodePen.
У цій демонстрації події обробляються JavaScript замість SMIL. Просто приємно знати, що ти теж можеш це зробити. Тригери подій SMIL - це круто, але тоді те, що потрібно натиснути, має бути в цьому SVG, а не просто де-небудь ще в DOM.