Анимация svg с css

Вам может показаться, что работа с кодом SVG кажется очень знакомой, в основном из-за того, что SVG имеет DOM, как и стандартная разметка HTML. Это чрезвычайно ценно при работе с CSS-анимацией, поскольку манипулирование разметкой с помощью CSS уже является очень удобным процессом для большинства разработчиков.

Для очень краткого обзора давайте сначала установим, что CSS-анимация создается путем определения двух параметров. Во-первых, есть сами ключевые кадры:

@keyframes animation-name-you-pick {
  0% {
   background: blue;
   transform: translateX(0);
 }
  50% {
   background: purple;
   transform: translateX(50px);
 }
  100% {
   background: red;
   transform: translateX(100px);
 }
}

Вы также можете определить fromи toвместо процентов. Если вы ничего не объявите ни в начальном ключевом кадре, ни в конечном ключевом кадре, анимация будет использовать свойства элемента по умолчанию или объявленные для элемента.

После вы определяете значения ключевого кадра, у вас есть два варианта объявления синтаксиса анимации. Вот пример длинной формы с каждым объявлением, определенным отдельно:

.ball {
  animation-name: animation-name-you-pick;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: 3;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

И более короткая (сокращенная запись):

.ball {
  animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}

Порядок объявлений взаимозаменяем в списке, разделенном пробелами, за исключением числовых значений, которые должны быть определены в следующем порядке: длительность, задержка и количество итераций.

Давайте применим эту анимацию к очень простому элементу:

Анимация с SVG

Теперь, вместо рисования шарика с помощью CSS, мы нарисуем его с помощью SVG. Мы знаем, как это сделать из пердыдущей статьи. Чтобы получить черный круг, напишем код:

Мы определяем радиус как половину 50, то есть 25 пикселей. Затем мы перемещаем центр круга по осям x и y ( cxи cy) на половину радиуса, а также добавляем поле в 20 пикселей, добавленное в CSS. Мы также можем использовать margin для перемещения шара, но здесь я иллюстрирую, что вы можете рисовать координаты непосредственно в самом SVG. Если мы переместим круг, тем не менее, viewBox должен быть больше, чтобы вместить эти координаты: это ширина плюс граница пространства до края.


Мы использовали предыдущую анимацию, только теперь для svg, отметим также, что вместо background мы использовали свойство fill, так как для заливки в svg, background не сработает.

 

Преимущества рисования с SVG

Так, зачем учиться SVG, когда вы могли бы создать что-то в стиле CSS HTML и анимировать таким же образом?

о-первых, даже этот маленький простой круг был на четыре строки меньше, чем версия CSS. SVG был создан для рисования — в отличие от CSS, который был создан для форматирования html страниц. Давайте посмотрим на код для звезды из предыдущей статьи:

<polygon fill = "white" stroke = "black" points = "279,5 294,35 328,40 303,62 309,94 279,79 248,94 254,62 230,39 263,35 "/>

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

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

 

Производительная анимация svg

Очень заманчиво использовать все те же свойства , которые вы используете , чтобы влиять на макет с помощью CSS: margintopleftи т.д. Но браузеры не обновляют значения для всех свойств одинаково. Чтобы анимировать с меньшими затратами ресурса браузера, лучше всего использовать transform и opacity. Эти инструменты могут показаться довольно скудными, но transform предлагает (позиционирование), масштабирование и вращение. Использование их в сочетании с непрозрачностью может быть чрезвычайно мощным. Удивительно, сколько можно достичь с помощью этих свойств в стандартных анимациях.

Поддержка в iе под вопросом, но при отсутствии поддержки данным браузером манипуляций css над svg элементом, рекомендуется использовать различные библиотеки типа GreenSock Animation API и другие js библиотеки, которые в дальнейшем мы рассмотрим.