Від автора: SVG володіє справді унікальними методами переміщення і маніпуляції об’єктами в області веб-анімації. Можливо, найбільш видовищним з них є «морфінг» — здатність переміщати і плавно змінювати форму об’єктів.
Налаштування
Правила нативного морфінга гранично прості: об’єкт, який потрібно перетворити вихідний елемент, повинен містити таку ж кількість вершин. Мова не йде про те ж самому типі вершин, тип може бути іншим, проте цілком можна зробити з кривою Безьє кут, приміром. Напевно, найпростішим прикладом буде неправильний багатокутник, щось типу того:
Щоб не писати код вручну, такий же багатокутник можна запросто створити Adobe Illustrator, зберігши файл у форматі SVG:
Вершини об’єкта будуть переміщатися до нових цільовим точкам, змінюю тим самим форму. Для цього ми скористаємося тегом специфікації SMIL. Зараз легше всього скопіювати об’єкт з ілюстратора і вставити його за новою, почистивши і додавши в код, що потрібно. Вийти повинно наступне:
І ми одержуємо:
Варто приділити трохи уваги таким речам:
Тег був поодиноким (), а став парним, всередині нього знаходиться .
Dur це тривалість анімації, як довго об’єкт переходить з одного стану в інший.
repeatCount=»indefinite» – SMIL еквівалент нескінченної анімації на CSS.
Анімація по найближчих точок
В SVG за замовчуванням рухаються тільки порівнювані між собою точки. У ілюстратора, рухаючи вершини об’єкта за годинниковою стрілкою, створюється відчуття обертання елемента:
На виході отримуємо:
Більш складні перетворення: Приховування вершин
У випадках, коли необхідно здійснити плавний перехід двох абсолютно різних об’єктів, деякі з точок ховаються. Наприклад, при перетворенні зірки в коло, легше спочатку побудувати коло і додати до нього додаткові вершини:
Коло підготовлений для перетворення в інший об’єкт, приховані точки видно
Додаткові точки на поверхні кола можна перемістити і отримати форму зірки.
Удар по морфінг анімації
Нещодавно команда розробників Chrome оголосила про плани виключення SMIL зі свого браузера на користь інших технологій, таких як Web Animation API і CSS-анімації. Це не означає, що SMIL буде видалений з браузера, але Google радить розробникам використовувати інші технології. На жаль, повноцінно поки що морфінг замінити просто нічим. Проте нещодавно анонсований MorphSVG, напевно, може вирішити цю проблему.
Морфінг в CSS
В CSS точно можна перетворити в прямокутник еліпс, змінюючи властивість border-radius. Приміром, у нас є квадрат:
#source {
width: 20rem; height: 20rem;
background: red;
animation: morph 2s alternate;
}
І анимируем його:
@keyframes morph {
to { border-radius: 50%; background: blue; }
}
Можна варіювати анімацію для згладжування окремих кутів. Основна проблема в тому, що такий підхід застосовується лише до простих прямокутникам і эллипсам, на відміну від складних і довільних форм в SVG.
Висновок
Мені дуже подобається SVG морфінг, так як він повертається до витоків Flash анімації, увібравши всі кращі риси. Але це не єдиний спосіб застосування даного типу анімації. Про інших способах я розповім в наступній статті.
