От автора: SVG обладает поистине уникальными методами перемещения и манипуляции объектами в области веб-анимации. Возможно, самым зрелищным из них является «морфинг» — способность перемещать и плавно менять форму объектов.
Настройка
Правила нативного морфинга предельно просты: объект, в который требуется преобразовать исходный элемент, должен содержать такое же количество вершин. Речь не идет о том же самом типе вершин, тип может быть другим, однако: вполне можно сделать из кривой Безье угол, к примеру. Наверное, самым простым примером будет неправильный многоугольник, что-то типа того:
|
1 2 3 |
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 800 500"> <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477" /> </svg> |
Чтобы не писать код вручную, такой же многоугольник можно запросто создать в Adobe Illustrator, сохранив файл в формате SVG:
Вершины объекта будут перемещаться к новым целевым точкам, изменяю тем самым форму. Для этого мы воспользуемся тегом <animate> спецификации SMIL. Сейчас легче всего скопировать объект из иллюстратора и вставить его по новой, почистив и добавив в код что требуется. Получиться должно следующее:
|
1 2 3 4 5 6 |
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 800 500"> <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477"> <animate attributeName="points" dur="1s" repeatCount="indefinite" to="190,20 374.3,8.3 361.8,479.4 199.3,454.4" /> </polygon> </svg> |
И мы получаем:
Стоит уделить немного внимания следующим вещам:
Тег <polygon> был одиночным (<polygon points=»…» />), а стал парным, внутри него находится <animate>.
Dur это продолжительность анимации, как долго объект переходит из одного состояния в другое.
repeatCount=»indefinite» – SMIL эквивалент бесконечной анимации на CSS.
Анимация по ближайшим точкам
В SVG по умолчанию двигаются только сравниваемые между собой точки. В иллюстраторе, двигая вершины объекта по часовой стрелке, создается ощущение вращения элемента:
|
1 2 3 4 5 6 |
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 800 500"> <polygon points="205.6,27 389.2,39.5 378.2,463.8 215,477"> <animate attributeName="points" dur="1s" begin="0s" to="371.7,7.7 363,480.3 199.7,454.3 190,19" /> </polygon> </svg> |
На выходе получаем:
Более сложные преобразования: Скрытие вершин
В случаях, когда необходимо осуществить плавный переход двух совершенно разных объектов, некоторые из точек прячутся. К примеру, при превращении звезды в круг, легче сначала построить круг и добавить к нему дополнительные вершины:
Круг подготовлен для превращения в другой объект, скрытые точки видны
Дополнительные точки на поверхности круга можно переместить и получить форму звезды.
Удар по морфинг анимации
Недавно команда разработчиков Chrome объявила о планах исключения SMIL из своего браузера в пользу других технологий, таких как Web Animation API и CSS анимации. Это не значит, что SMIL будет удален из браузера, но Google советует разработчикам использовать другие технологии. К сожалению, полноценно пока что морфинг заменить просто нечем. Однако недавно анонсированный MorphSVG, наверное, может решить эту проблему.
Морфинг в CSS
В CSS точно можно превратить прямоугольник в эллипс, изменяя свойство border-radius. К примеру, у нас есть квадрат:
|
1 2 3 4 5 |
#source { width: 20rem; height: 20rem; background: red; animation: morph 2s alternate; } |
И анимируем его:
|
1 2 3 |
@keyframes morph { to { border-radius: 50%; background: blue; } } |
Можно варьировать анимацию для сглаживания отдельных углов. Основная загвоздка в том, что такой подход применим только к простым прямоугольникам и эллипсам, в отличие от сложных и произвольных форм в SVG.
Заключение
Мне очень нравится SVG морфинг, так как он возвращается к истокам Flash анимации, вобрав все лучшие черты. Но это не единственный способ применения данного типа анимации. О других способах я расскажу в следующей статье.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
