На 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></animate>
</path>
</svg>
Додамо атрибути і значення в animate
елементи для визначення анімації. Це
код для переходу квадрата в трикутник:
Анімовані елементи мають 4 атрибути:
-
attributeName="d"
: Ім'я атрибута, який буде анімований. Атрибут SVGd
містить координати, які визначають шлях; -
dur="3000ms"
: тривалість анімації, 3000 мілісекунд або 3 секунди; -
repeatCount="indefinite"
: те, скільки разів буде запущена анімація. Невизначений атрибут працює без зупинки; -
values = "{coordinate list}"
: список шляхів, які координують анімацію переходу;
Список значень - це те місце, де справжня магія відбувається. Список містить будь-яку кількість значень шляхів, і анімація переходів, ці шляхи переходу на протязі виконання анімації.
Шляхи повинні мати однакове число вершин. При запуску анімації, вона анімує вершини в порядку їх появи у визначенні. Якщо число вершин не відповідає кількості шляхів, анімація не працюватиме. Вона стрибає між початком і кінцем. Я визначив кожну фігуру з чотирма вершинами і переконався, що положення кожної вершини збігалося з тим, якою я хотів бачити анімацію для запуску.
На площі в трикутнику , перша вершина квадрата на його лівому верхньому куті. Перша вершина трикутника в точці яка в середині лівої кромки. В SMIL, анімація положення цієї вершини, рушиться верхній правий кут квадрата вниз в сторону трикутника.
Визначаємо spline
Я додав останні координати для анімації. Кожен набір координат - це зупинка по шляху анімації. В деяких місцях, я визначив таку ж форму послідовно. Це пояснюється тим, що анімація зупиняється на цій формі.
Тут також є нові атрибути:
-
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
.
Я зробив спрощування, тривалість і кількість значень дорівнюють кількості
шляхів анімації. Цим я спростив анімацію. Ось і готовий продукт!
І ось вона поруч з оригінальним GIF:
Анімація не є повною копією оригіналу, але вийшло майже подібна анімація. Поліпшити її можна шляхом додавання додаткових визначень шляху і за допомогою точнішого спрощування натякнути браузеру на правильну анімацію руху. Мені подобається простота цього коду. Є й інші властивості SVG, такі як повороти і переміщення, які можуть бути анімовані в SMIL.
Ще немає коментарів