Временная шкала и анимация по ключевым кадрам с помощью 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;

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

Необычные эффекты 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. Вырезать, например в изображении отверстие в форме маски, показывая тем самым всё, что находится ниже изображения.
В примере ниже в состав маски входят прямоугольник и окружность. Изменяя радиус окружности, можно менять размер круглой маски, увеличивая или уменьшая размер круглого отверстия сквозь, которое становится видимым нижнее градиентные полосы.

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

Анимации с использованием stroke-dasharray и stroke-dashoffset

Для создания разнообразных примеров прогрессбаров, лоадеров и других анимированных объетов, применение stroke-dashharray, stroke-dashoffset является основным способом.
В статье: Анимация рисования линии используется только изменение атрибута stroke-dashoffset от максимума до нуля.
Но если использовать комбинацию stroke-dasharray и stroke-dashoffset, то можно получить интереснейшие эффекты.

Начнем со стандартной техники реализации прогрессбара

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

1. Изменение stroke-dashoffset от максимума до нуля

icon Lion-break


Полная длина окружности равна
C = 2 x PI x R или 2 x 3.14 x 50 = 314px
При stroke-dashoffset = “314” линия будет полностью скрыта
При stroke-dashoffset = “0” линия будет полностью видна

Изменяя значение Stroke-dashoffset от максимума до нуля получим эффект заполнения прогрессбара

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