Временная шкала и анимация по ключевым кадрам с помощью Anime.js

В этой статье мы изучим основы Anime.js и узнаем, как создавать анимацию с ключевыми кадрами (keyframe) и временными шкалами (timeline). Anime.js – это очень легкий движок анимации JavaScript, поддерживающий все современные браузеры. Для создания очень красивой анимации требуется всего пара строк JavaScript. Давайте посмотрим на пример и изучим основы Anime.js.

Анимация отдельного свойства

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

Как самостоятельно сделать анимацию SVG иконки

Допустим требуется сделать векторную SVG иконку с анимацией на основе растрового образца.

Растровая иконка образец

Техника создания векторной иконки и её анимации

Шаг #1. Загрузка в векторный редактор растрового изображения

Загружаем в векторный редактор растровое изображение иконки и наносим узловые точки по контурам рисунка.

inkscape-face

Сохраняем файл в формате *.svg

Ниже получившийся код векторной иконки

Шаг #2. Анимация вращения глаз (зрачка)

Добавляем к path анимацию:

Анимация вращения начнется после наведения курсора на иконку

Шаг #3. Анимация вращения языка

⇚ Иконка разбитое сердце
Следующая ⇛  Позиционирование иконок SVG

Линейный прогресс бар SVG

Линейный прогресс бар SVG можно реализовать с помощью изменения или:
1 stroke-dashoffset
от нуля до максимального значения равного полной длине линии.
Этот способ подробно описан в статье: Анимация рисования линии

2. stroke-dasharray
при этом способе в начальной точке роста линии прогресс бара значение
dash – длина черты, равно нулю, а gap – длина пробела максимальна.
stroke-dasharray:0,628;

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

Элемент foreignObject

Элемент foreignObject служит для вставки кода HTML внутри SVG.
Известно, что внутри SVG автоматического переноса строки, как в HTML не существует.
Это очень неудобно использовать для переноса строки в SVG теги < tspan >
Поэтому, используя foreignObject можно получить автоматический перенос строки внутри SVG
Для начала задаем регион действия. Это прямоугольник с указанными координатами. < foreignObject x=”100″ y=”180″ width=”1080″ height=”800″>
Изменяя их можно точно разместить текст, допустим внутри красивой рамки SVG.

1. Структура файла SVG с встроенным foreignObject

Получился текст с автоматическим переносом строк в внутри рамки SVG Если высота текста превышает высоту рамки, то появится
полоса прокрутки

Ниже полный пример кода:

2. Ещё пример художественной рамки SVG и текста внутри foreignObject

⇚Как добавить SVG в HTML5 страницу Эти странные тэги SVG ⇛

Необычные эффекты stroke-dasharray

  1. Заполнение строки svg элемента окружностями
  2. Заполнение строки одной, двумя, n окружностями
  3. Заполнение строки шестью окружностями
  4. Анимация спирали со строкой, состоящих из кружков
  5. Анимация изменения формы рамки
  6. Создаем облака с помощью двух строк stroke-linecap/a>
  7. Создаем анимацию краев облака

При совместном использование атрибутов stroke-dasharray и stroke-linecap=”round”, можно получить интересные эффекты визуализации.
У stroke-dasharray. два параметра – stroke-dasharray=”черта, пробел”

1. Заполнение строки svg элемента окружностями

для этого необходимо:

  • длину черты установить равную нулю – stroke-dasharray=”0, пробел”
  • а пробел установить равным ширине строки stroke-width

Итого:
stroke-dasharray=”0, 35″ stroke-width=”35″

при таких значениях параметров, строка элемента будет заполнена окружностями

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

Примеры анимации масок SVG

Анимация масок реализуется за счет анимации элементов svg, входящих в состав маски. Составными частями маски могут быть любые базовые фигуры SVG: Line, circle, ellipse, polyline, polygon, rect, а также path любой формы.

Маска может работать в нескольких режимах

1. Обрезать всё, что находится вне зоны действия маски, то есть этот режим подобен действию clipPath
2. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

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