Все статьи | Блог студента

Анимированный пузырь / SVG без использования JS и Canvas

Эта статья написана нашим студентом. Мнение пользователей иногда может не совпадать с точкой зрения Хекслета
Анимированный пузырь / SVG без использования JS и Canvas главное изображение

Сегодня научимся создавать вот такие вещи без JS и canvas:

Анимированный пузырь

Рисуем пузырь

  • Заходим на figma.com и создаем новый файл;
  • Выбираем Pen или жмем клавишу P.

pen

Рисуем прямоугольник — жмем Done.

Замыкаем первую и последнюю линию

Удалим обводку и заполним прямоугольник веселым цветом.

Жмем на минус чтобы удалить stroke, добавляем цвет в fill

Давайте наконец сделаем из квадрата то, что нам нужно.

Жмем кнопку Edit Object.

rectangle

Теперь Bend Tool

Bend Tool

Жмем на сторону квадрата. Должны появится вот такие точки:

start transform

Тянем одну из них вверх:

pull

Как видим — фигура искривляется. На этом мои глубокие познания в Figma и векторной графике кончаются. Поэтому просто проделываем подобный трюк для всех четырех точек.

Вот что получилось у меня

Отлично, пузырь готов. Он будет нашей «стартовой» позицией.

Скопируем его и поставим рядом.

Советую еще их переименовать для удобства

Снова жмем Edit Object — Bend Tool и немного меняем пузырь справа.

almost done

То, что получилось — это состояние фигуры, к которой будет стремится изначальная:

=> start → finish → start → finish → ∞

Скачаем, то что получилось:

  • Выделяем вектора;
  • Выбираем svg как расширение;
  • Жмем Export.

Скачиваем и распаковываем архив

Объедим два SVG в один анимированный

Откроем скачанные svg и создадим один новый:

Скопирую содержимое start в result:

В result.svg сделаю тег парным — :

Удалю атрибуты width и height, чтобы не мешались.

Во viewBox установлю максимально возможные значения высоты и ширины:

  • в start.svg ширина = 363, а в finish.svg = 364. Беру 364;
  • в start.svg высота = 302, а в finish.svg = 311. Беру 311.

Ключевой момент: анимировать будем с помощью тега animate.

Обратите внимание на поддержку браузеров!

Вкладываем его внутрь path:

Коротко по атрибутам:

  • repeatCount — сколько раз произойдет анимация. Устанавливаем indefinite, чтобы задать бесконечное число итераций;
  • attributeName — имя атрибута, который будем анимировать. В нашем примере это d, где хранятся координаты фигуры;
  • dur — длительность анимации.

Добавим еще один — values. Скопипастим в него значение атрибута d из текущего тега path:

Это те самые координаты, которые мы нарисовали в первом пузыре

Добавим в него же значение атрибута d из файла finish.svg:

После каждой координаты не забывайте точку с запятой;

Третьей строку копипастим из первой дабы замкнуть анимацию:

<animate repeatCount="indefinite" attributeName="d" dur="10s"
  values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
  M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
  M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>

Результат:

Как выглядит вы можете посмотреть в самом начале статьи.

Сюда же я скину сам svg:

<svg viewBox="0 0 364 311" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z" fill="#FFCC00">
    <animate repeatCount="indefinite" attributeName="d" dur="10s"
      values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
        M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
        M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>
  </path>
</svg>

И codepen, где можно наглядней с ним ознакомиться.

Аватар пользователя Vadim Filimonov
Vadim Filimonov 02 ноября 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
1 декабря 5 месяцев