SVG обєкти: перетворення

20

Від автора: SVG володіє справді унікальними методами переміщення і маніпуляції об’єктами в області веб-анімації. Можливо, найбільш видовищним з них є «морфінг» — здатність переміщати і плавно змінювати форму об’єктів.

Налаштування

Правила нативного морфінга гранично прості: об’єкт, який потрібно перетворити вихідний елемент, повинен містити таку ж кількість вершин. Мова не йде про те ж самому типі вершин, тип може бути іншим, проте цілком можна зробити з кривою Безьє кут, приміром. Напевно, найпростішим прикладом буде неправильний багатокутник, щось типу того:

Щоб не писати код вручну, такий же багатокутник можна запросто створити Adobe Illustrator, зберігши файл у форматі SVG:

SVG обєкти: перетворення

Вершини об’єкта будуть переміщатися до нових цільовим точкам, змінюю тим самим форму. Для цього ми скористаємося тегом специфікації SMIL. Зараз легше всього скопіювати об’єкт з ілюстратора і вставити його за новою, почистивши і додавши в код, що потрібно. Вийти повинно наступне:

І ми одержуємо:

SVG обєкти: перетворення

Варто приділити трохи уваги таким речам:

Тег був поодиноким (), а став парним, всередині нього знаходиться .

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

repeatCount=»indefinite» – SMIL еквівалент нескінченної анімації на CSS.

Анімація по найближчих точок

В SVG за замовчуванням рухаються тільки порівнювані між собою точки. У ілюстратора, рухаючи вершини об’єкта за годинниковою стрілкою, створюється відчуття обертання елемента:

На виході отримуємо:

SVG обєкти: перетворення

Більш складні перетворення: Приховування вершин

У випадках, коли необхідно здійснити плавний перехід двох абсолютно різних об’єктів, деякі з точок ховаються. Наприклад, при перетворенні зірки в коло, легше спочатку побудувати коло і додати до нього додаткові вершини:

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 анімації, увібравши всі кращі риси. Але це не єдиний спосіб застосування даного типу анімації. Про інших способах я розповім в наступній статті.