Анимация семейства улиток

Анимация семейства улиток

Для создания анимации необходимо нарисовать или найти подходящий файл SVG с главным персонажем анимации – улиткой.
Будет по возможности сделана комплексная анимация: тела улитки, анимация усиков, глаз и рта улитки. Улиток будет несколько: мама улитка и детеныши. Всё семейство будет двигаться по листику травы слева направо.

Продолжить чтение

Анимация маршрутов самолётов на растровой карте

Маршруты полётов

Карты всего мира, карты отдельной страны, в растровом формате довольно легко найти, чего не скажешь об аналогичных картах в формате SVG.
Поэтому, в этой статье я попытаюсь совместить SVG анимацию маршрутов полета самолетов на растровой карте. Ключевая особенность этой статьи,- применение Unicode самолёта в качестве объектов анимации.
Продолжить чтение

Анимация рисования линии

icon Lion-break

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.
Продолжить чтение

Определение центра вращения фигур

  1. Вычисление длины одной из сторон правильного многоугольника
  2. Вычисление центра вращения шестиугольника
  3. Вычисление центра вращения пятиугольника
  4. Определение радиусов вписанной и описанной окружностей
  5. Определение координат центра вращения пятиугольника
  6. Примеры анимации правильных многоугольников
  7. Таблица для вычисления параметров правильных многоугольнико

Для осуществления анимационных эффектов, связанных с вращением, увеличением фигур из центра, необходимо точно знать координаты центра вращения, а так же, в некоторых случаях, и длину периметра фигур. Рассмотрим правильные многоугольники: пятиугольник, шестиугольник, восьмиугольник и т.д. Ниже приведен пример шестиугольника, но все параметры, расчетные формулы одинаковы для любого правильного многоугольника, меняется только “n”
Вычисление центра вращения
С – длина стороны многоугольника
n – число сторон
R – радиус описанной окружности
r – радиус вписанной окружности
Формулы расчета:
C = 2*R*sin(180°/n) = 2*r*tg(180°/n)
R = (c/2)/sin(180°/n) = r/cos(180°/n)
r = (c/2)*ctg(180°/n) = R*cos(180°/n)

Для вычисления центра вращения нужно, как-то определить заранее, хоть один параметр, например – длину стороны многоугольника – “C”.
Это можно сделать несколькими способами:

Вычисление длины одной из сторон правильного многоугольника

Для этого используем содержимое команды – path

Вычисление центра вращенияПервая группа цифр после команды M (moveto) – M48.9 60.9 определяет координаты начальной (зеленой) точки стороны многоугольника. Вторая группа цифр – координаты конечной (синей) точки – 16.9 60.9 Вычисляем длину горизонтальной стороны многоугольника –
C = 48.9 – 16.9 = 32px
Вычисляем радиус описанной окружности шестиугольника:
R = (c/2)/sin(180°/n), где n=6
R = 16/sin(30°) = 32px
для шестиугольника – R = C

Вычисление центра вращения шестиугольника
Радиус вписанной окружности: r = R*cos(180°/n) = 32*cos(30°) = 27.71px

Для определения центра вращения шестиугольника необходимо расчитать параметры Cx, Cy.
Cx = 16.9 + С/2 = 32.9;
Cy = 60.9 – r = 60.9 – 27.71 = 33.19px;

Проверяем:

Вычисление центра вращения пятиугольника

Открываем файл *.svg, созданный в векторном редакторе и находим строку кода, рисующую пятиугольник.

Начальная точка (зелёная) отрисовки пятиугольника имеет координаты – M38.8 31.3, далее по часовой стрелке, следующая вершина пятиугольника – 69.4 53.6

Вычисление центра пятиугольника Как и в примере с шестиугольником, легче всего вычислить длину горизонтальной стороны многоугольника (зелёная и жёлтая точки) – С = 57,6 – 19,7 = 37,9
Но это частный случай, когда сторона многоугольника паралелльна одной из осей ординат. В большинстве случаев сторона многоугольника идет под углом к осям ординат. Вычислим длину наклонной стороны, используя теорему Пифагора – с2 = a2 + b2 На рисунке это треугольник с жёлтыми точками на вершинах. Так как начало координат (0,0) полотна SVG находится в левом верхнем углу, поэтому

a = 89.5 – 53.6 = 35.9 – из нижней точки вычитаются координаты “y” верхней точки

b = 69.4 – 57.6 = 11.8 – вычитаются координаты “x” двух вершин треугольника
c = √ 35.92 + 11.82   = 37.78

Определение радиусов вписанной и описанной окружностей по формулам из таблицы ниже

R = 0,851*C = 32.16px – радиус описанной вокруг пятиугольника окружности
r = 0688*C =26.0px – радиус вписанной в пятиугольник окружности

Определение координат центра вращения пятиугольника

Cx = 19.7 + C/2 = 19.7 +18.9 = 38.6px
Cy = 31.3 + R = 31.3 + 32.16 = 63.46px
Проверяем вычисленные центры вращения для пятиугольника и шестиугольника. Анимация начинается при наведении курсора мышки.
Первая и вторая картинка вращаются пока наведен курсор мышки. Третья картинка – увеличение. Четвертая – вращение и одновременное увеличение размеров изображения.

pentagon rotate
hexagon rotate
pentagon rotate
hexagon rotate
Таблица для вычисления параметров правильных многоугольников

n (число сторон)
c (сторона многоугольника)
R (радиус описанной окружности)
r (радиус вписанной окружности)
S (площадь многоугольника)
3
1,772*R 3,464*r 0,577*c 2,000*r 0,289*c 0,500*R 0,433*c2 1,299*R2 5,196*r2
4
1,414*R 2,000*r 0,707*c 1,414*r 0,500*c 0,707*R 1,000*c2 2,000*R2 4,000*r2
5
1,176*R 1,453*r 0,851*c 1,236*r 0,688*c 0,809*R 1,721*c2 2,378*R2 3,633*r2
6
1,000*R 1,155*r 1,000*c 1,155*r 0,866*c 0,866*R 2,598*c2 2,598*R2 3,464*r2
7
0,868*R 0,963*r 1,152*c 1,110*r 1,038*c 0,901*R 3,635*c2 2,736*R2 3,371*r2
8
0,765*R 0,828*r 1,307*c 1,082*r 1,207*c 0,924*R 4,828*c2 2,828*R2 3,314*r2
9
0,684*R 0,728*r 1,452*c 1,064*r 1,374*c 0,940*R 6,182*c2 2,893*R2 3,276*r2
10
0,618*R 0,650*r 1,618*c 1,052*r 1,539*c 0,951*R 7,694*c2 2,939*R2 3,249*r2
11
0,564*R 0,587*r 1,775*c 1,042*r 1,703*c 0,960*R 9,364*c2 2,974*R2 3,230*r2
12
0,518*R 0,536*r 1,932*c 1,035*r 1,866*c 0,966*R 11,196*c2 3,000*R2 3,215*r2
16
0,390*R 0,398*r 2,563*c 1,020*r 2,514*c 0,981*R 20,109*c2 3,062*R2 3,183*r2
20
0,313*R 0,317*r 3,196*c 1,013*r 3,157*c 0,988*R 31,569*c2 3,090*R2 3,168*r2
24
0,261*R 0,263*r 3,831*c 1,009*r 3,798*c 0,991*R 45,575*c2 3,106*R2 3,160*r2
32
0,196*R 0,197*r 5,101*c 1,005*r 5,077*c 0,995*R 81,225*c2 3,121*R2 3,152*r2
48
0,131*R 0,131*r 7,645*c 1,002*r 7,629*c 0,998*R 183,08*c2 3,133*R2 3,146*r2
64
0,098*R 0,098*r 10,190*c 1,001*r 10,178*c 0,999*R 325,69*c2 3,137*R2 3,144*r2


Расчетные данные взяты – здесь
⇚ Масштабирование векторных изображений
Позиционирование иконок SVG ⇛
Примеры анимация многоугольников ⇛

Позиционирование иконок SVG

  1. Позиционирование иконок в одиночном файле SVG
  2. Позиционирование иконок с помощью ‘viewBox’
  3. Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’
  4. Позиционирование иконок с помощью min-x, min-y ‘viewBox’
  5. Позиционирование изменением параметров команды ‘use’

Итак, мы выбрали векторные иконки, но сразу их использовать не получается, так как одни больше, другие меньше того размера, который нам необходим. Как изменить размеры иконок обсуждалось здесь.
Позиционирование, центрирование иконок внутри файла SVG очень тесно связано с маштабированием.

Позиционирование иконок в одиночном файле SVG

Позиционирование иконок внутри файла SVG становится необходимым, если при встраивании векторного изображения в страницу Html, появляются большие отступы текста вокруг иконок.

image description

Возьмем иконку с размерами 48x48px, и добавим её внутрь Html страницы, таким образом, чтобы текст обтекал её слева. Ниже код иконки.

Пример размещения иконки внутри Html.

combo_chartx2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————-
Результат не радует – получились огромные отступы текста справа и снизу. Чтобы понять причину этого, добавим красную рамку, которая показывает истинный размер ‘viewport’ – области просмотра SVG файла.

Сразу стало видно, что ‘viewport’ занимает в два раза больше места, чем иконка, именно из-за этого образуются большие отступы текста от иконки.
Для уменьшения отступов, нужно уменьшить размеры ‘viewport’.
У нас был масштаб – viewport / viewBox = 96/96 – M1:1.
Чтобы избежать искажения графики оставляем масштаб 1:1, но при этом уменьшаем размеры ‘вьюпорта’ и ‘вьюбокса’ – viewport / viewBox = 48/48 – M1:1.

image description

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere non enim vitae tincidunt. Quisque eleifend, lectus a rhoncus cursus, libero risus condimentum ipsum, vitae finibus dolor metus eget turpis. Mauris vitae elementum sem. Aliquam urna ligula, pretium eu lorem non, dapibus dignissim lorem. Integer tempor tempus ex, a egestas lectus condimentum sed. Suspendisse tellus sem, placerat ac malesuada sed, tincidunt.
———————————————————————————————————————–
Размер иконки остался тот же, отступы текста сократились вдвое.

Позиционирование иконок с помощью ‘viewBox’

Этот способ позиционирования является наиболее простым и понятным. Он может быть использован на практике, если отступы от векторного объекта до краев области просмотра не критичны для вёрстки страницы.

letter-ed

Центрирование по горизонтали.
Возьмем иконку с геометрическими размерами 100×100 px и поместим её в прямоугольную область просмотра ‘viewport’ с шириной width =”200″ и высотой height=”100″ пикселей.

Здесь красная рамка показывает границы ‘viewport’ – области просмотра.
Так как ширина ‘viewport’ – больше в два раза ширины ‘viewBox’ мы ожидаем, что иконка должна растянуться по оси х-ов в два раза.

preserve-none

Но, на самом деле, растягивание изображения до границ ‘viewport’ не происходит, так как не указан атрибут – preserveAspectRatio отвечающий за пропорциональность трансформации. В этом случае его значение по умолчанию равно – preserveAspectRatio=”xMidYMid meet”, что соответствует центрированию изображения по осям “X” и “Y”
Чтобы получить растягивание изображения, как на картинке выше, значение этого параметра должно быть – preserveAspectRatio=”none”.
Далее примеры использования ‘preserveAspectRatio’ для различного позиционирования SVG иконки.

preserve-none

preserve-none

preserve-none

Центрирование по вертикали.

Для этого назначим ‘viewport’ высотой 200px и шириной 100px
и атрибут – preserveAspectRatio=”xMidYMid meet”

preserve-none

Позиционирование с помощью ‘preserveAspectRatio’ возможно лишь в случае присутствия ‘viewBox’. В противном случае ‘preserveAspectRatio’ – игнорируется.

Позиционирование нескольких иконок с помощью ‘preserveAspectRatio’

На ум сразу приходит решение этой задачи – использовать ‘preserveAspectRatio’. Одну иконку направить влево – ‘xMinYMin’, вторую разместить по центру – ‘xMidYMid’, третью вправо – ‘xMaxYMax’. Каждую иконку обернуть в свой ‘symbol’, так как у него есть свой ‘viewBox’ и ‘preserveAspectRatio’. Структура в примере ниже:

Не сработало.
Все три иконки собираются одна под другой в центре ‘viewport’. Это результат доминирующего действия ‘preserveAspectRatio’ в шапке файла SVG. И всё, что указано ниже в ‘symbol’ – игнорируется.
Как нейтрализовать действие ‘preserveAspectRatio’ в шапке файла и дать возможность этой же команде внутри ‘symbol’ позиционировать самостоятельно?
Попробовать убрать его в шапке файла, но по умолчанию будет всё равно центрирование – preserveAspectRatio=”xMidYmid meet”.
Присвоить ему значение – preserveAspectRatio=”none”? – Тогда верхняя иконка растянется на всю ширину ‘viewport’a.

Решение есть – убрать ‘viewBox’ из шапки файла и тогда ‘preserveAspectRatio’ в шапке будет проигнорировано и сработают команды в ‘symbol’
preserve-none

Недостаток этого метода в малом количестве иконок, которые можно позиционировать – от одной до трёх.


preserve-none

Достоинство метода – блок иконок добавляется в Html, как один объект и то, что находится внутри его не влияет на разметку страницы.
Блок иконок легко может быть преобразован из горизонтального в вертикальный путем изменения ширины и высоты ‘viewport’ в шапке файла – width=”100″ height=”310″

Позиционирование иконок с помощью min-x, min-y ‘viewBox’

У ‘viewBox’ всё наоборот – уменьшение сторон ведет к увеличению масштаба изображения. Перемещение центра координат вправо, смещает изображение влево. Подробнее здесь.
Давайте используем это свойство смещения векторных изображений, путём изменения начала координат ‘viewBox’а, для еще одного способа позиционирования иконок.
Допустим нам надо в одном файле svg разместить по горизонтали 5 иконок. Размер каждой иконки – 126х126 px.
Расширяем ‘viewport’ по горизонтали до width=”630″, высоту оставляем прежней – height=”126″. Собираем в одном файле все иконки и оборачиваем код каждой в свой ‘symbol’ с уникальным ‘id’ . Изменением параметра ‘min-x’ (первая цифра ‘viewBox’) позиционируем каждую иконку.

Положительное значение ‘min-x’ сдвигает иконку влево. Отрицательное значение – вправо.

Ниже структура файла SVG с пятью иконками. Обратите внимание, что у ‘viewBox’ов внутри ‘symbol’ изменяется только первая цифра, отвечающая за положение начала координат по оси абцисс.

viewBox-icons

Данный метод позволяет поместить в один файл сколько угодно векторных изображений, но более удобно позиционировать нечётное количество векторных объектов, так как средняя иконка позиционируется автоматически. Файл SVG можно встроить в Html несколькими способами. В данной статье svg добавляется, как изображение <img> с фолбэк’ом от David Bushell для браузеров не поддерживающих SVG

Обратите внимание, что при выводе изображения SVG заданы его размеры. Очень удобно, можно одновременно изменять масштаб всех иконок в блоке.
Необходимо только следить за пропорциями: было – width=”600″ height=”126″
стало – width=”300″ height=”63″ и третий вариант width=”150″ height=”31″

preserve-none
preserve-none

Позиционирование изменением параметров команды ‘use’

Команда ‘use’ создает прямоугольную область с началом координат – x=”0″ y=”0″ и служит для вывода изображений. Ширина и высота этой области, если не указаны другие значения, равны ширине и высоте ‘viewport’.

В отличии от ‘viewBox’ сдвиг вправо начала координат ‘use’ сдвигает векторное изображенгие вправо.

Последовательность позиционирования иконок по горизонтали следующая:
Расширяем ‘viewport’ в шапке файла, чтобы хватило места для всех иконок. Высоту ‘viewport’ – назначаем равной высоте иконок.
‘viewBox’, если он есть в шапке файла удаляем. Это для того, чтобы исключить воздействие – ‘preserveAspectRatio’
Код каждой иконки оборачиваем в’symbol’, присваиваем ему ‘id’

Далее позиционируем иконки по горизонтали, изменяя значения – x=”…”. Обратите внимание, что можно менять иконки местами внутри блока SVG.

viewBox-icons-use
Можно менять и сами иконки и их стилевое оформление, но это тема отдельной статьи.
viewBox-icons-use

⇚ Масштабирование векторных изображений

Масштабирование векторных изображений

Часто задают вопросы:

  • Как увеличить, уменьшить размеры векторных картинок.
  • Как разместить картинку по центру.
  • Почему при увеличении масштаба картинка обрезалась по краям.
  • Почему изображение сдвинулось вправо, влево и так далее

Рецепты лечения не сложные, но в каждом конкретном случае по одному и тому же вопросу действия будут разные. Всё зависит от многих факторов, например для изменения масштабирования нужно ответить себе на вопросы:
Размеры ‘viewport’ и ‘viewBox’ в шапке файла заданы, они равны или отличаются друг от друга?
Картинка вызывается из внешнего файла или размещена inline в Html?
Есть ли у ‘Symbol’ свой ‘viewBox’?
Есть ли дополнительный ‘SVG’ опять же со своим ‘viewBox’?
В итоге получается, что векторное изображение может масштабироваться от одного до нескольких раз, до того момента, как мы увидим его на дисплее.

Если изменять параметры методом “научного тыка”, то скорее всего можно потерять много времени и получить непредсказуемый результат.

Начнем с простого.

Масштабирование изображения в одиночном файле SVG

Берем файл иконки 48х48 px, всё как есть, без изменений кода.

two_smartphones png
Итак, ожидали увидеть небольшую иконку, так как значение – viewBox=”0 0 48 48″, а тут на весь экран смартфонище.

Произошло это из-за отсутствия в шапке SVG файла указания размеров viewPort. Если размеры width, height viewport’а не указаны, то они по умолчанию равны – 100%, поэтому изображение автоматически растянулось на весь экран.

Известно, что масштаб векторной картинки зависит от соотношения величин viewport / viewBox. Подробнее здесь.
1. Если соотношение сторон viewport / viewBox 1:1 – масштаб векторной картинки будет – М1:1, размеры в нашем случае 48х48 px, см. код ниже.
2. Если пропорция viewport / viewBox – 2:1 – масштаб М2:1, то есть происходит увеличение изображения в 2 раза – 96х96 px.
3. Если пропорция viewport / viewBox – 1:2 – масштаб М1:2, то есть происходит уменьшение изображения в 2 раза – 24х24 px.
Чтобы получить эти варианты масштабирования, корректируем каждый раз строку, добавляя, изменяя значения: width=”48″ height=”48″(viewport)

smartphones-1-1 png

smartphones-1-1 png

smartphones-1-1 png

Верхняя картинка – масштаб 1:1, средняя М2:1, нижняя М1:2;

Масштабирование изображения при наличии ‘symbol’

В этом случае векторная картинка проходит масштабирование несколько раз, так как ‘symbol’ имеет собственный ‘viewBox’.
Возьмем теперь иконку, которая имеет размеры 100х100px и ‘symbol’ с viewBox=”0 0 100 100″

icon tweeter png

Для того, чтобы увидеть, как влияет ‘symbol’ на масштаб картинки я убрал все другие факторы масштабирования:
задал в шапке файла соотношение viewport/viewBox – 1:1.
В команде вывода картинки на экран <use xlink:href=”#…..”/> не указал параметры width и height , которые тоже могли бы влиять на масштаб картинки. Итак, при этих заданных условиях, на масштаб теперь могут влиять только изменения параметров ‘viewBox’ – ‘символа’.
Иконка выше отрисовалась без изменений, в масштабе 1:1 к оригинальному размеру. Так как ‘viewBox’ – ‘символа’ тот же, что и в шапке файла.

Можно ‘viewBox’ – ‘символа’ в этом случае не прописывать, результат будет – 1:1

Далее, допустим, у нас появилась необходимость уменьшить иконку в два раза. Все условия прежние, меняем только параметры – ‘viewBox’ – ‘символа’, увеличивая их в 2 раза.

icon tweeter png

С чем тут сравнивается ‘viewBox’ – ‘символа’ для вычисления масштаба? Ответ – с ‘viewport’, который задан в шапке SVG файла – viewport(SVG) / viewBox(symbol’s) – 100/200 = M1:2. Размер иконки стал – 50х50 px.
Обратите внимание на красную рамку вокруг иконки – это ‘viewport’, который задан в начале SVG файла – width=”100″ height=”100″. Это очень удобно – видеть границы ‘viewport’ во время настройки масштаба.

Важно помнить, что единожды заданные размеры ‘viewport’ в шапке svg файла остаются неизменными в пределах одного файла, как бы мы не изменяли масштаб векторных изображений с помощью повторяющихся ниже в коде файла ‘viewBox’, ‘use’, и т.д.

Размеры изображения после масштабирования могут стать больше, чем размеры ‘viewport’ поэтому они будут обрезаны по ширине и/или высоте ‘viewport’а. Смотри пример ниже.

icon tweeter png

‘viewport'(SVG) / ‘viewBox'(symbol’s) – 100/50 = M2:1.
Размер иконки стал – 200х200 px и поэтому в область просмотра ‘viewport’ – 100х100 px поместилась только верхняя четверть иконки.

Масштабирование изображения при использовании ‘use’

Для чистоты эксперимента отключаем все возможности масштабирования иконки, которые рассмотрели выше.
Оставляем масштабирование в команде ‘use’ с помощью параметров width и height. В отличии от ‘viewBox’, где уменьшение сторон влекло за собой увеличение масштаба, у команды ‘use’ прямо пропорциональная зависимость – увеличение width и height вызывает увеличение размеров вектоной картинки.

Если ширина и высота ‘use’ не указаны или они равны ширине и высоте ‘viewport’ SVG файла, то масштаб картинки не будет изменяться.

icon beacon png
icon beacon png
icon beacon png
icon beacon png
icon beacon png

Статья получилась намного длиннее, чем я планировал, потому центрирование векторных изображений лучше рассмотреть в новой статье.