Анимация линии svg. Что такое SVG. Выжимаем максимум из SVG
В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG .
Основы
Анимация SVG выполняется с помощью элемента
Мы добавляем элемент
attributeName : здесь определяется атрибут, который будет участвовать в анимации.
from : опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x и y:
В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу
Также все действует и для элемента
Анимация нескольких атрибутов
Конечно, в элементе
Здесь мы анимируем для атрибута для элемента
| Элемент | Описание |
|---|---|
| Анимация отдельного свойства элемента в течение определенного промежутка времени. | |
| Задание изменения цвета элемента. | |
| Анимация, в которой элемент двигается вдоль заданной траектории. | |
| Анимация, в которой участвуют трансформации (преобразования). | |
| Анимация дискретного изменения свойства. |
Внутри этих элементов помещаются атрибуты, определяющие тип анимации. В табл. 11.2 приводится их описание.
| Атрибут | Описание |
|---|---|
| attributeName | Указание свойства объекта, которое будет анимироваться. Например, для изменения цвета фигуры (заливки) атрибут будет выглядеть так: attributeName="fill" |
| attributeType | Задание пространства имеет, указывающее тип атрибута. Возможные значения: CSS – анимация свойств, относящихся к спецификации CSS (Шрифт, цвет шрифта, кернинг и другие). XML – анимация свойства, относящегося к SVG – графике (Перенос, вращение, искажение и другие). auto – значение по умолчанию, включающее в себя значения свойств CSS и XML . |
Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар " атрибут – значение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 11.3 приводится описание атрибутов анимации. Это общие атрибуты для всех элементов анимации.
Элемент animate
Элемент animate предназначен для анимации отдельного свойства объекта. Поскольку каждый объект может содержать большое количество свойств, то применение этого элемента позволяет создавать весьма разнообразные анимации. Рассмотрим следующий фрагмент кода:
Внутри тега rect элемента прямоугольник помещен элемент animate . В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attributeName="x" . Границы изменения (в пикселях) устанавливаются от нуля (from="0" ) до двухсот (to="200" ). По умолчанию, анимация начнется сразу после загрузки в браузер , и будет продолжаться в течении 10 секунд (dur="10s" ). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение (repeatCount=" indefinite " ). В табл. 11.4 приводятся примеры с использованием элемента animate.
| № | Код | Вид в браузере |
|---|---|---|
| 11.4.1 |
Листинг 11.4.1. Пример animate1.svg |
|
| Описание | ||
| Изменение абсциссы прямоугольника | ||
| № | Код | Вид в браузере |
| 11.4.2 |
Листинг 11.4.2. Пример animate2.svg |
 |
| Описание | ||
| Изменение ординаты прямоугольника. | ||
| № | Код | Вид в браузере |
| 11.4.3 |
Листинг 11.4.3. Пример animate3.svg |
 |
| Описание | ||
| Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали. | ||
| № | Код | Вид в браузере |
| 11.4.4 |
Листинг 11.4.4. Пример animate4.svg |
 |
| Описание | ||
| Одновременное увеличение ширины и высоты прямоугольника. | ||
В рассмотренных примерах мы видели изменение простейших свойств объекта – его координат, ширины и высоты.
Очень хорошо вписываются в современный веб-дизайн своей легкостью и , качественно отображаются на Retina мониторах
.
Один из способов эффективного создания SVG графики и анимации - это использование библиотек
. Они позволяют создавать простую и сложную SVG анимацию
начиная от вращения объектов, изменения их размеров и форм до создания полноценного анимационного сюжета. Объектами векторной анимации
могут выступать текст, изображения, пользовательский интерфейс, логотип и др. Ниже рассмотрены библиотеки, которые позволяют облегчить работу с SVG анимацией.
Подписывайтесь на , группу и следите за обновлениями.
Velocity
Одна из самых популярных библиотек, которая воплощает графику в жизнь. Основной упор Velocity на быстрое воспроизведение анимации . Для тех, кто знаком с анимацией в , библиотека не вызовет никаких трудностей в использовании. Библиотека использует API как в jQuery $.animate () .Особенность библиотеки в том, что она полностью поддерживает анимацию SVG элементов, включая такие свойства, как x, rx, stroke-width и др. Также поддерживается работа с цветом.
SVG.JS
Легкая библиотека для работы с векторной графикой . Поддерживает анимацию с позицией, размером, цветом и трансформацией. SVG.JS также включает возможность привязать события к элементам, создать динамический градиент, задать прозрачность и настроить анимацию текста.
Walkway
Легкая библиотека для рисования линий и полигонов . Walkway поддерживает элементы path, line и polyline . Имея столь узкое направление, она хорошо выполняет свою функцию.
Raphael.JS
Небольшая библиотека для упрощения работы с векторной графикой . Следуя рекомендациям W3C SVG, каждый графический объект становится также DOM-объектом, что позволяет позже изменять его с помощью JavaScript. Очень хорошая поддержка браузеров, включая версии IE6 и выше.
Snap.Svg
Snap.Svg имеет простой JavaScript API для создания анимации и делает содержимое более привлекательным. Библиотеку можно использовать для SVG анимации , созданной при помощи графических программ, таких как Illustrator, Inkscape или Sketch. Snap.svg имеет открытый исходный код и распространяется с лицензией Apache 2.
Bonsai
Bonsai включает в себя полный набор инструментов для работы с графикой и анимацией . Имеет графический API позволяющий легко создать SVG анимацию.Можно посмотреть все функции Bonsai в онлайн редакторе. Очень мощная библиотека с которой интересно работать.
Lazy Line Painter
Маленький плагин для SVG анимации рисования линий . Хорошо и со стилем выполняет свою задачу. Необходимо пройти три этапа для получения готовой анимации: экспортируем линейную анимацию с Illustrator"а как svg файл, вставляем его в конвертер на сайте, получаем готовый JS код.
Vivus
Очень сильная библиотека для рисования линий . Позволяет выбирать стиль анимации линий: с задержкой, асинхронно или одна за другой. Посмотрите пример на сайте библиотеки и вы все поймете. Для более сложных изображений позволяет задать сценарий рисования.
Что такое SVG
SVG - это двухмерная векторная графика, дословно «масштабируемая векторная графика», и, тем не менее, это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Adobe Illustrator, CorelDRAW, Adobe Fireworks, Incscape, SVG-Edit Online, ConceptDraw PRO и другие.
Фактическое развитие SVG началось с версии 1.1 опубликованной W3C в 2011 году. Анонс улучшенной версии 2.0, превосходящей возможности Flash, намечен на 2017 год. Благодаря языку разметки XML, легко встраивается в HTML документ.
SVG-объекты ничем не отличаются от стандартных в графических редакторах.
Давайте абстрагируемся от музыкальных метафор и пробежимся по основным советам по составлению композиции. Убедитесь:
Линии и ломаные линии
Многоугольники
Окружности и эллипсы
Кривые Безье
Сложные контуры
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например, визуализировать графики, круговые диаграммы, гистограммы
SVG для десктопа
SVG не теряет в качестве при масштабировании и не зависит от разрешения экрана
В связи с тем, что информация об объекте хранится в описательной форме, можно бесконечно увеличить графический примитив при выводе на графическое устройство
Объем данных, занимаемый описательной частью, не зависит от реальной величины объекта, что позволяет, используя минимальное количество информации, описать сколь угодно большой объект файлом минимального размера. Например, описание окружности произвольного радиуса требует задания только 3 чисел, не считая атрибутов.
Наличие прозрачного фона
SVG для мобильных
SVG хорошо выглядит без потери качества на мобильных устройствах и планшетах
Объекты SVG зачастую весят намного меньше растровых изображений
При помощи CSS3 и JavaScript можно менять стили и атрибуты для SVG-элементов
SVG идеально подходит для визуальных коммуникаций и микровзаимодействия с пользователем на мобильном устройстве
Анимация на основе SVG
Наличие прозрачного фона
Легко создавать и редактировать
Поддаётся gzip-сжатию и оптимизации без потери качества
Выжимаем максимум из SVG
Предостережение
С увеличением количества мелких деталей в изображении, растёт размер SVG-файла. Проще использовать jpeg или даже png. Например, изображение травы в векторе может весить 10мб, а тоже самое изображение в jpg будет весить 200кб.
Как работать с SVG. Что нужно знать в теории?
smooth curveto (S,s)
quadratic Bezier curveto (Q,q)
smooth quadratic Bezier curveto (T,t)
elliptical arc (A,a)
Структуру SVG документа в отдельном файле.
Для полноценной анимации будем использовать только inline-встраивание SVG.
Минимальный набор для встраивания в html:
viewBox="x y width height" - определяет пользовательскую область просмотра
Можно использовать аналог спрайтов, когда все иконки в одном файле, а областью видимости показываем только нужную.
Выравнивание с preserveAspectRatio необходимо для настройки пропорций изображения
Ось X в области просмотра:
xMin -левая граница области просмотра
xMid -центр по оси X
xMax -правая граница области просмотра
Ось Y в области просмотра:
YMin - по верху
YMid -по центру
YMax - по низу
meet - указывает, что изображение должно сохранить свои пропорции и быть полностью видимым (CSS-аналог background-size:contain;)
slice - указывает, что изображение должно сохранить свои пропорции и будет отмасштабировано в соответствии с максимальным граничным значением области просмотра (CSS-аналог background-size:cover;)
none - означает, что внутреннее изображение потеряет свои пропорции и будет использовать пропорции viewBox.
Основные примитивы SVG
В подробности вдаваться не буду (тема отдельной статьи), их описание можно найти в стандарте W3C https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#RectElement
А нас больше всего интересует тег, так как позволяет управлять любой точкой и кривыми безье в контуре. О нем будет рассказано ниже в практическом блоке. Важно знать, что существует несколько моделей построения кривых:
Моя задача подать материал максимально просто, поэтому за наглядные примеры http://www.petercollingridge.co.uk/svg-tutorial/paths благодарю Петра Колингриджа (Peter Collingridge).
По опыту компании, скажу что с абсолютными координатами точек работать проще.
Клонирование объектов с помощью тегов
У нас был проект, в котором использовалось много однотипных иконок с большим количеством цветовых оттенков. Задачу решили, создав глобальный inline-SVG для всех страниц с множеством переменных
Градиенты
Как работать с SVG. Что нужно знать на практике?
Var s = Snap("#svg"); // возьмем готовый svg на странице или создадим новый s = Snap(800, 600); // нарисуем новый контур var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ fill: "none", stroke: "#bada55", strokeWidth: 5 });
Суть анимации, плавно перейти из начального положения в конечное. Ниже описана пошаговая инструкция по созданию анимации на основе SVG.
Возможность встраивания SVG в HTML даёт преимущество управлять SVG-элементами и их атрибутами с помощью JS. На картинках ниже показано, что мы можем дотянуться не только до самих точек, а также, до кривых безье.
Любой графический редактор, обладающий возможностью работы с векторной графикой, имеет path-панель.
С ее помощью будем управлять точками и кривыми безье.
Наша задача нарисовать начальное и конечное положение кривых. А анимацию на html-странице описать Javascript’ом.
Визуально обозначим траекторию движения будущей анимации
Как видим, всё просто! Матрицы аффинных преобразований не потребовались:)
Как использовать SVG для анимации, интерактивности и микровзаимодействия
Важный момент: Почему мы не используем стандартные средства анимации в SVG? Язык SMIL (Synchronized Multimedia Integration Language) не рассматриваем, так как W3C больше не будет поддерживать SMIL.
Возьмем, к примеру, две кривые в виде XML
Программирование анимации (изменение X,Y-координат у точек) будет выглядеть примерно так:
- M 166.5 142.5 L 518 182.5 L 885.5 142.5
- M 166.5 150 L 518 190 L 885.5 150
- M 166.5 155 L 518 195 L 885.5 155
- M 166.5 350 L 518 170 L 885.5 350
- M 166.5 355 L 518 175 L 885.5 355
- M 166.5 362.5 L 518 322.5 L 885.5 362.5
!!! Важно чтобы количество точек совпадало.
Продолжаем пример. Если мы хотим сделать выпуклый квадрат. Нужно нарисовать квадрат с 8-ю точками.
Код для анимации такого квадрата:
Var s = Snap($("svg")); var path = s.path(start_path); // устанавливаем начальное положение $("play").click(function () { path.stop().animate({ "path": end_path }, 500, mina.easeout); // конечное положение (function () { path.stop().animate({ "path": start_path }, 500, mina.backout); // возвращаем начальное положение }).delay(500); }); //код передаёт только суть и не обязан работать
Библиотека Snap SVG «прорисовывает» движение между контурами по функциям плавности.
!!! Главное мы получаем 100% качественное кросс-браузерную анимацию без потери качества.
Мы коснулись технической стороны вопроса, но есть уровень более высокий, чем программирование анимации. Речь о концепте.
Концепт анимации
Просматривая различные концепты анимации, видно не правильную анимацию, которую скорее можно назвать презентационной и которую нельзя использовать в проекте. Мы собрали подборку интересных, на наш взгляд, решений, когда анимация действительно помогает пользователю и создает вау-эффект.
Хорошая анимация должна быть правильной с точки зрения достижения результата. Она должна объяснять пользователю, как работать с интерфейсом, должна помогать ориентироваться в нём - сейчас, во времена flat-дизайна, мы видим первые попытки сделать плоский дизайн живым и реалистичным.
На основе нашего практического опыта работы с интерфейсами для различных сайтов и мобильных приложений, мы смогли определить несколько правил и преимуществ анимации:
Повышение удобства использования
Оригинальность
Простота использования
Выполнение одновременно нескольких параллельных задач
Ускорение работы интерфейса
Улучшение обратной связи для пользователя
Цели анимации
Правила анимации
Анимация как дополнительный индикатор правильности работы интерфейса
Анимация как способ сэкономить место
Анимация как способ добавить реалистичности к интерфейсу и создать вау-эффект без вреда для использования
Анимация как способ скрыть «баги» или отвести внимание пользователя (лоадеры, параллакс-загрузки, индикаторы процесса)
Она не должна перегружать страницу или скрин, вызывая долгую и раздражающую загрузку
Нужно тщательно продумывать анимацию с учетом разных устройств и условий, с которыми целевой пользователь соприкоснется в работе с продуктом
Анимация не должна слишком отвлекать от главных функций или контента на экране или веб-странице
Она должна соответствовать общему стилистическому концепту приложения или веб-сайта, чтобы поддерживать общую гармонию в восприятии продукта
Роль SVG в эластичном дизайне
Эластичный прелоадер
Форма с плавной обратной связью
Эластичное меню
Роль качественной анимации в интерфейсах возрастает. Интерфейсы могут быть более живыми, чем просто плоские иконки и линейная анимация. Так родилось понятие эластичного дизайна.
И в первую очередь, эластичный дизайн - это дизайн, который реагирует на действия пользователя. Эластичный дизайн не ограничивает свободу движений. И помогает пользователям совершать нужные действия. Эластичный дизайн идеально вписывается в направление «интерфейсов в одном окне», а также в пространственные интерфейсы.
Как сказал один наш клиент: «Как желе, дрожит от любого прикосновения».
Роль SVG в эластичном дизайне сводится к анимированию, гибкости, текучести, взаимозависимости, плавности, наложению слоев... Вообщем сделать flat живым.
Основы эластичного дизайна
Элементы не живут сами по себе. Каждый элемент зависит от другого, создавая пространство единой системы взаимосвязей.
Эластичный дизайн адаптируется под любые разрешения.
Каждый элемент дает обратную связь на действия пользователя. У пользователя не должно остаться сомнений о совершении того или иного действия.
Эластичный дизайн направлен в первую очередь на удобство интерфейсов.
Усиливаем анимацию с помощью функций плавности и svg-фильтров
Ещё раз напомню два основных типа анимации, на которых мы сфокусировались:
Эластичная анимация
Анимация при микровзаимодействии
В стандарте SVG существует 19 фильтров:
feBlend - наложение слоёв (overlay, screen, multiply и другие)
feColorMatrix - цветовая матрица позволяет управлять цветом изображений
feComponentTransfer - используется для изменения цвета, как photoshop эффекты - brightness adjustment, contrast adjustment, color balance или thresholding.
feComposite - композитный фильтр, используется для наложения или вырезания двух слоёв.
feConvolveMatrix - аналог эффектов bevel, emboss, sharpen и edge detection.
feDiffuseLighting - направленная подсветка, чем-то похожа на bump mapping
feDisplacementMap - смещает изображение с использованием значений координат пикселей второго изображения
feFlood - по сути рисует новый квадрат
feGaussianBlur - размытие
feImage - преобразует векторную графику в растровую
feMerge - параллельное объединение SVG-фильтров
feMorphology - используется когда необходимо истончить или утолщить края исходного изображения
feOffset - сдвиг изображения по координатам x и y
feSpecularLighting - подстветка
feTile - мозаика и аналог паттернов
feTurbulence - создает фрактальный или беспорядочный шум
feDistantLight - фильтр для подсветки
fePointLight - фильтр для подсветки
feSpotLight - фильтр для подсветки
Чем не Photoshop? Мы можем использовать последовательное наложение фильтров.
Рассмотрим, как сделать «текучесть» в эластичном дизайне с помощью последовательного наложения SVG-фильтров.
Размытие на входе принимает исходное изображение, выдаёт результат blur.
Цветовая матрица принимает результат blur и выдает glow. Здесь меняется цвет входящего изображения, чтобы создать альфа-канал для композитного фильтра.
Композитный фильтр накладывает на изначальное изображение результат glow с помощью оператора atop (http://apike.ca/prog_svg_filter_feComposite.html)
На выходе получаем «текучесть» только между точками.
Пример работы функций плавности.
В библиотеке Snap.SVG за них отвечает переменная «mina» со скудным набором функций.
Полный набор функций плавности можно найти на сайте http://easings.net
Итог
Эластичная анимация интерфейса является отличным способом удержания пользователей на сайте, так как использование интерактивных элементов позволяет решать задачи быстрее и интереснее. А развитие технологий скоро позволит перенести полноценные Photoshop-инструменты в web, с возможностью анимации. Но перед тем как применять моушн-дизайн, нужно проанализировать его потенциал для улучшения удобства. Хорошая анимация рождается на стадии концепта и преследует четкие цели. Функции плавности доводят движения до реалистичности. Нас ждет по-настоящему живой flat. Преимущества и полезность применения анимации в процессе «визуальной коммуникации» очевидны и перевешивают возможные недостатки.
, Алла Кудин .Статья написана отделами AFFINAGE DESIGN и AFFINAGE PRODUCTION компании AFFINAGE .
5 января 2014 в 16:27Анимация SVG-элемента path
- Разработка веб-сайтов ,
- Визуализация данных
- Tutorial
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media) . Это те, где консоли отрисовывались в стиле blueprint"ов:
Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров - SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента path - можно узнать под катом.
Stroke-dasharray interpolation, теория
Вообще техника подобной анимации линий не нова, просто до недавнего времени SVG и всё, что с ним связано, на мой взгляд, было несправедливо предано забвению, но к счастью ситуация меняется. Итак, трюк с анимацией элемента path возможен благодаря свойству stroke-dasharray элемента path . Это свойство позволяет задавать параметры пунктирной линии, а именно длину штриха и промежутка между штрихами. Если задать длину штриха равной всей длине линии, то получим обыкновенную сплошную линию. Если же задать длину штриха равной нулю, а длину промежутка опять-таки равной всей длине линии, то получим невидимую линию. А постепенно увеличивая длину штриха при длине промежутка, равной длине всей линии, мы можем имитировать её отрисовку. При таком подходе отрисовка будет происходить от начала линии. Если же вдруг необходимо отрисовывать с конца, то нужно использовать ещё одно свойство: stroke-dashoffset . Это свойство определяет смещение для первого штриха. Таким образом, уменьшая смещение и увеличивая длину штриха, получим отрисовку с конца линии.Ребята из Vox Media использовали гибридный вариант (который, на мой взгляд, избыточен), кстати почитать о том, как они это делали, можно (и нужно) в их блоге: Polygon feature design: SVG animations for fun and profit .
Реализация SVG анимации
В Vox Media предлагают использовать requestAnimationFrame для плавности анимации, но у нас немного другие цели, так что мы пойдём более простым путём, воспользуемся библиотекой D3.js и реализованной в ней анимацией на основе длительности.Вот собственно рабочий код, использовавшийся для анимации консоли из начала статьи.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var paths = svg.selectAll("path") .call(transition); function transition(path) { path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() { d3.select(this).call(transition); }); // infinite loop } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr return function(t) { return i(t); }; } }
Начнём просто с движения вдоль линии, пока без вращения.
Queue()
.defer(d3.xml, "wiggle.svg", "image/svg+xml")
.await(ready);
function ready(error, xml) {
//Adding our svg file to HTML document
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#pathAnimation").node().appendChild(importedNode);
var svg = d3.select("svg");
var path = svg.select("path#wiggle"),
startPoint = pathStartPoint(path);
var marker = svg.append("circle");
marker.attr("r", 7)
.attr("transform", "translate(" + startPoint + ")");
transition();
//Get path start point for placing marker
function pathStartPoint(path) {
var d = path.attr("d"),
dsplitted = d.split(" ");
return dsplitted.split(",");
}
function transition() {
marker.transition()
.duration(7500)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);// infinite loop
}
function translateAlong(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";//Move marker
}
}
}
}
Здесь pathStartPoint(path) вытаскивает координаты начала линии из атрибута элемента path . В translateAlong(path) с помощью интерполятора задаются координаты нашего маркера. Пример можно посмотреть здесь: Marker animation along SVG path element with D3.js . А ещё можно объединить анимацию отрисовки линии и движение маркера, выглядеть это может следующим образом: Marker animation along SVG path element with D3.js II .
Усложним задачу, добавим вращение (ну и поменяем маркер с круга на что-нибудь поинтереснее). В качестве маркера у нас будет ракета с шириной 48 и длиной 24 . Поскольку по умолчанию точкой привязки маркера является левый верхний угол, нам необходимо смещать его, чтобы привязка была к центру маркера. Также необходимо учитывать это при вращении, ведь оно тоже по умолчанию происходит вокруг левого верхнего угла. Со смещением вроде разобрались. Теперь перейдём непосредственно к вращению, здесь нам поможет определение касательной , угол будем определять с помощью арктангенса.
Функция translateAlong(path) , определяющая интерполятор будет выглядеть следующим образом:
Function translateAlong(path) {
var l = path.getTotalLength();
var t0 = 0;
return function(i) {
return function(t) {
var p0 = path.getPointAtLength(t0 * l);//previous point
var p = path.getPointAtLength(t * l);////current point
var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle for tangent
t0 = t;
//Shifting center to center of rocket
var centerX = p.x - 24,
centerY = p.y - 12;
return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12" +")";
}
}
}
Реализацию можно посмотреть здесь.
