Введення в SVG анімацію за допомогою SMIL

На Sitepoint нещодавно був розміщений виклик - відтворити цю забавну GIF анімацію за допомогою HTML і CSS: 

Це виглядає дуже просто, але це важко зробити без великої кількості ключових кадрів. Я схилявся до SVG, але вже давно хотів дати можливість SMIL проявити себе. Мені не вдалось знайти багато ресурсів по SMIL тому, я вирішив поділитись тим, що я дізнався сам.

Що таке SMIL?

SMIL (Synchronized Multimedia Integration Language) - це мова розмітки, яку можна використовувати для анімації SVG без CSS або JS. Оскільки SVG має векторну основу, з SMIL ви можете створювати більш складні анімації, ніж ті, що можна отримати за допомогою CSS і елементів DOM. Існує один недолік для SMIL: він не підтримується ні в одній версії IE. Будь-який інший браузер буде підтримувати SMIL через декілька версій.

Анімація форми з SMIL

Щоб відтворити GIF, я розбив його на окремі кадри:

Я хотів написати  SVG форми вручну, тому я створив чотири основні форми: квадрат, алмаз, трикутник і круг. SVG з ViewBox 100х100 зберігає координати, тому з ним дуже легко працювати. 

Синтаксис для анімації виглядає так:

<svg viewbox="0 0 100 100">
  <path>
    <animate/>
  </path>
</svg>

Додамо атрибути і значення в animate елементи для визначення анімації. Це код для переходу квадрата в трикутник:

See the Pen An Intro to SVG Animation with SMIL - Example 1 by Noah Blon (@noahblon) on CodePen.

Анімовані елементи мають 4 атрибути:  

• attributeName="d": Ім'я атрибута, який буде анімований. Атрибут SVG d містить координати, які визначають шлях;
• dur="3000ms":  тривалість анімації, 3000 мілісекунд або 3 секунди;
• repeatCount="indefinite": те, скільки разів буде запущена анімація. Невизначений атрибут працює без зупинки;
• values = "{coordinate list}": список шляхів, які координують анімацію переходу;

Список значень - це те місце, де справжня магія відбувається. Список містить будь-яку кількість значень шляхів, і анімація переходів, ці шляхи переходу на протязі виконання анімації.

Шляхи повинні мати однакове число вершин. При запуску анімації, вона анімує вершини в порядку їх появи у визначенні. Якщо число вершин не відповідає кількості шляхів, анімація не працюватиме. Вона стрибає між початком і кінцем. Я визначив кожну фігуру з чотирма вершинами і переконався, що положення кожної вершини збігалося з тим, якою я хотів бачити анімацію для запуску. 

На площі в трикутнику , перша вершина квадрата на його лівому верхньому куті. Перша вершина трикутника в точці яка в середині лівої кромки. В SMIL, анімація положення цієї вершини, рушиться верхній правий кут квадрата вниз в сторону трикутника.

Визначаємо spline

See the Pen An Intro to SVG Animation with SMIL - Example 2 by Noah Blon (@noahblon) on CodePen.

Я додав останні координати для анімації. Кожен набір координат - це зупинка по шляху анімації. В деяких місцях, я визначив таку ж форму послідовно. Це пояснюється тим, що анімація зупиняється на цій формі.

Тут також є нові атрибути: 

• keyTimes = "{keytimes list}": список значень розділених крапкою з комою починаючи з 0 і закінчуючи 1. Там повинно бути стільки значення keyTimes скільки є в визначенні шляху. Якщо значеннь більше чи менше, анімація не працюватиме. keyTimes - це відсоток від тривалості, на якому прийнято відповідне значення, коли закінчується його анімація. В демо, друге і третє значення в keyTimes є 0,0625 і 0,20833. Друге і третє значення в значеннях є шляхами, що визначають квадрат і ромб. Це означає, що між 6.25% і 20,833% від тривалості анімації, є анімація переходу від квадрата до алмазу. 
• calcMode = "spline": визначає, як анімація спрощується. За замовчуванням має лінійне значення. Установка значення в spline каже анімації, що спрощувати поряд з кривими Безьє. 
• keySplines = "{spline list}": криві Безьє, уздовж якої анімація спрощується. calcMode повинен бути встановлений та застосовуватися на spline keySplines. Значення keySplines - це список визначень кривої Безьє, кожне значення розділяються крапкою з комою. Там повинно бути стільки значеннь  keySplines, скільки є в шляху, але мінус одне значення. Це  через те, що спрощування відбувається між значеннями, а не на значеннях. Анімація не працюватиме без цього числа значень. Кожен сплайн, або крива Безьє, збігається з його еквівалентною парою шляхів. easings.net має приємну діаграму графіків, що відображають ряд широко використовуваних спрощувань Безьє.

Анімація з кольором в SVG. 

Серед іншого, в SMIL можна анімувати колір заливки. Потрібно визначити ще один анімаційний елемент, щоб керувати зміною кольору. Методика та ж, що і в анімації шляху, за винятком того, що в values наведено список кольорів замість визначень шляху і attributeName потрібно поставити fill замість d. Я зробив спрощування, тривалість і кількість значень дорівнюють кількості шляхів анімації. Цим я спростив анімацію. Ось і готовий продукт!

See the Pen An Intro to SVG Animation with SMIL - Example 3 by Noah Blon (@noahblon) on CodePen.

І ось вона поруч з оригінальним GIF:

See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen.

Анімація не є повною копією оригіналу, але вийшло майже подібна анімація. Поліпшити її можна шляхом додавання додаткових визначень шляху і за допомогою точнішого спрощування натякнути браузеру на правильну анімацію руху. Мені подобається простота цього коду. Є й інші властивості SVG, такі як повороти і переміщення, які можуть бути анімовані в SMIL.

Джерело