Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>25 мар 2022</li>

3 <li>0</li>

4 </ul>Рассказываем об онлайн-сервисах, которые помогут сделать несложную анимацию для сайта.

5 Иллюстрация: Meery Mary для Skillbox Media

6 SVG расшифровывается как Scalable Vector Graphics - масштабируемая векторная графика. Это означает, что такие изображения можно сколько угодно увеличивать, и они не потеряют резкости и чёткости деталей. В векторной графике легко менять форму, цвет и расположение элементов.

7 Анимация SVG также не снизит качество картинки при масштабировании, в отличие от GIF. Она мало весит, адаптируется под любой интерфейс, быстро загружается и не зависает.

8 Обычно SVG-анимацию используют в четырёх случаях:

9 <ul><li>иконки разделов меню и функций,</li>

10 <li>графические элементы управления и кнопки,</li>

11 <li>иллюстрации и инфографика,</li>

12 <li>логотипы.</li>

13 </ul>SVG-анимацию можно сделать самостоятельно с помощью CSS и JavaScript - это даёт свободу для реализации любой идеи, но требует знаний программирования. Если у вас нет времени изучать новые направления работы, воспользуйтесь специальными сервисами - они экономят время, но ограничивают ваши возможности шаблонами.

14 Рассказываем о шести онлайн-инструментах, которые помогут сделать несложную анимацию векторной графики.

15 Сервис позволяет быстро добавить "поведение" (Behaviour) изображению - то есть указать, какие из её элементов будут анимированы.

16 Как пользоваться:

17 <ol><li>Откройте<a>SVGMator</a>и нажмите кнопку Start Animating.</li>

18 <li>Загрузите ваш SVG-файл на сайт по кнопке Select from your computer или перетащите его в окно браузера.</li>

19 <li>Выберите нужную деталь изображения в меню Elements.</li>

20 <li>Из готовых шаблонов в меню Presets выберите анимацию для элемента. Настройте длительность анимации, задержку, скорость и формат появления элемента.</li>

21 <li>Чтобы проверить результат, нажмите кнопку Preview.</li>

22 <li>Чтобы сохранить работу, нажмите Save & Embed.</li>

23 </ol>Сервис выводит результат в виде embed-кода - это встраиваемый элемент, который нужно интегрировать в веб-страницу. Похожим образом на сайты встраиваются видео с YouTube и посты из Twitter.

24 SVGMator работает бесплатно и не требует регистрации.

25 Это браузерное приложение помогает анимировать обводку (Stroke) и заливку (Fill) SVG-изображений.

26 Как пользоваться:

27 <ol><li>Откройте<a>SVG Artista</a>и нажмите кнопку Open SVG.</li>

28 <li>В меню Animation type выберите Animation.</li>

29 <li>Настройте анимацию контура в разделе Stroke animation и анимацию заливки в разделе Fill animation. Вы можете изменять плавность движения, длительность, отсрочку старта. Кстати, если у вашего изображения белый контур и его не видно, нажмите кнопку Background color и поменяйте цвет фона.</li>

30 <li>Чтобы проверить результат, нажмите кнопку Play.</li>

31 <li>Чтобы сохранить работу, нажмите Get Code.</li>

32 </ol>SVG Artista выводит результат в виде кода - его можно сразу добавить на веб-страницу.

33 Сервис полностью бесплатный.

34 Функции сервиса ограничены только анимацией контура. Но пользователям доступно три эффекта: отложенная анимация, синхронная и анимация элемента за элементом. С помощью них можно быстро изменить поведение анимированных иконок.

35 Как пользоваться:

36 <ol><li>Откройте<a>Vivus Instant</a>и перетащите свой SVG-файл на страницу.</li>

37 <li>Перейдите в ручной режим редактирования анимации по кнопке Manual.</li>

38 <li>Подберите нужный эффект, задержку, длительность анимации в микросекундах и сценарий появления элемента. Для сохранения настроек нажимайте кнопку Update.</li>

39 <li>Чтобы зациклить анимацию, зайдите в раздел Loop и подберите подходящие параметры.</li>

40 <li>Чтобы сохранить работу, нажмите на кнопку Download. Файл скачается в формате обычного SVG.</li>

41 </ol>Сервис бесплатный и без возможности регистрации.

42 Это онлайн-приложение позволяет создавать собственные анимированные изображения из простых геометрических форм: квадратов, треугольников, кругов. Здесь нельзя загрузить и редактировать собственные файлы, но можно быстро и без навыков рисования сделать элементы интерфейса с зацикленной анимацией.

43 Как пользоваться:

44 <ol><li>Откройте<a>SVG Circus</a>.</li>

45 <li>Выберите готовую иконку из выпадающего меню Animation Presets или создайте её сами из элементов в разделе Actors. Укажите для них нужные размер, цвет контура и заливки, прозрачность. Для полигональной фигуры можно настроить количество граней и наклон в плоскости.</li>

46 <li>В разделе Tricks настройте анимацию элементов.</li>

47 <li>В разделе Scenario задайте сценарий анимации всей композиции и зациклите её.</li>

48 <li>Чтобы сохранить работу, нажмите на кнопку Export SVG. Результат будет доступен в виде кода, который нужно добавить на готовую страницу сайта.</li>

49 </ol>SVG Circus полностью бесплатный и работает без регистрации.

50 Это онлайн-генератор и библиотека анимированных SVG-изображений: иконок, паттернов, спиннеров. Здесь можно редактировать свои файлы или кастомизировать готовые иконки и UI-элементы. А ещё анимировать фоны для веб‑страниц и текстовые блоки на основе встроенных шаблонов - правда, интерфейс воспринимает только латиницу.

51 Loading.io условно-бесплатный. Без подписки у вас будет полноценный доступ только к ресурсам, помеченным значками Free и BY.

52 Как пользоваться:

53 <ol><li>Зайдите на <a>Loading.io</a>.</li>

54 <li>Чтобы найти готовую анимированную графику, в разделе Icon выберите галерею спиннеров, иконок или тематические наборы. В карточке каждого изображения вы сможете поменять цветовую палитру, тип анимации и размер элемента.</li>

55 <li>Чтобы добавить анимацию в собственный SVG-файл, нажмите кнопку Upload.</li>

56 <li>Укажите нужные поведение, размер, скорость анимации, количество повторов цикла, цвета.</li>

57 <li>Сохранить результат в виде анимированных, а не статичных SVG-файлов получится только с платной подпиской. В бесплатной версии сохранить можно только статичную иконку.</li>

58 </ol>Браузерное приложение с интерфейсом, напоминающим Adobe After Effects. Множество функций и настроек позволяют создавать качественную анимацию как новичкам, так и профессионалам.

59 SVGator - условно-бесплатный, и без подписки пользователю доступны лишь базовые эффекты: изменение размеров элементов, поворот, появление, исчезновение. Без оплаты получится экспортировать только три анимированных SVG.

60 Как пользоваться:

61 <ol><li>Откройте страницу<a>SVGator</a>и нажмите кнопку Get Started.</li>

62 <li>Кликните по кнопке New Project: в приложении откроется меню для импорта SVG-файла, куда можно загрузить готовое изображение. Если вы хотите нарисовать его с нуля, нажмите кнопку Create.</li>

63 <li>Выберите деталь изображения, которую хотите анимировать. Это можно сделать кликом по нужной части изображения на холсте или в меню Elements.</li>

64 <li>Нажмите на значок "Настройки" и укажите, какая у анимации должна быть длительность и нужна ли цикличность.</li>

65 <li>Чтобы настроить анимацию, нажмите кнопку Transform.</li>

66 <li>Нажмите кнопку Animate и выберите тип анимации. На шкале установите временную рамку: от начала до конца "клипа" или определённый отрезок внутри него.</li>

67 <li>В разделе Transforms в меню справа вы можете задать точные значения для поведения в полях Position, Anchor, Scale, Skew и Rotate. Также поведение объекта можно задать вручную.</li>

68 <li>Чтобы проверить результат, нажмите кнопку Play.</li>

69 <li>Чтобы сохранить работу, нажмите Save. Результат скачивайте в виде SVG‑файла по кнопке Export.</li>

70 </ol>Оплатить подписку на зарубежные сервисы можно картами Visa, Mastercard, JCB или через PayPal. Если у вас российская банковская карта, то оплатить подписку напрямую не получится.

71 <a>Курс с трудоустройством: "Профессия Моушн-дизайнер" Узнать о курсе</a>