SVG объекты: преобразование

SVG объекты: преобразование

От автора: SVG обладает поистине уникальными методами перемещения и манипуляции объектами в области веб-анимации. Возможно, самым зрелищным из них является «морфинг» — способность перемещать и плавно менять форму объектов.

Настройка

Правила нативного морфинга предельно просты: объект, в который требуется преобразовать исходный элемент, должен содержать такое же количество вершин. Речь не идет о том же самом типе вершин, тип может быть другим, однако: вполне можно сделать из кривой Безье угол, к примеру. Наверное, самым простым примером будет неправильный многоугольник, что-то типа того:

<svg xmlns="http://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. Сейчас легче всего скопировать объект из иллюстратора и вставить его по новой, почистив и добавив в код что требуется. Получиться должно следующее:

<svg xmlns="http://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 по умолчанию двигаются только сравниваемые между собой точки. В иллюстраторе, двигая вершины объекта по часовой стрелке, создается ощущение вращения элемента:

<svg xmlns="http://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. К примеру, у нас есть квадрат:

#source { 
width: 20rem; height: 20rem;
background: red;
animation: morph 2s alternate;
}

И анимируем его:

@keyframes morph {
    to { border-radius: 50%; background: blue; }
}

Можно варьировать анимацию для сглаживания отдельных углов. Основная загвоздка в том, что такой подход применим только к простым прямоугольникам и эллипсам, в отличие от сложных и произвольных форм в SVG.

Заключение

Мне очень нравится SVG морфинг, так как он возвращается к истокам Flash анимации, вобрав все лучшие черты. Но это не единственный способ применения данного типа анимации. О других способах я расскажу в следующей статье.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по HTML5: основы

Изучите HTML5 с нуля!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree