Генератор keyTimes


Генератор keyTimes позволяет визуально настроить разные темпы анимации на разных участках пути анимируемого объекта.
У генератора изменяются два атрибута: по оси “Х” – keyTimes, по оси “Y” – values
Перетаскивая красную контрольную точку строго по горизонтали, мы тем самым меняем значение keyTimes для данного отрезка пути, указанного в соответствующем атрибуте values.
Количество значений keytimes и values должно совпадать.
Значения keyTimes указываются в долях от единицы, каждое значение разделено точкой с запятой. keyTimes=” 0;0.25;0.5;0.75;1″
В итоге суммарная единица keyTimes равна общей продолжительности анимации.
Пример использования keyTimes генератора

Выберем график анимации, как на картинке ниже

график keyTimes

По графику видно, что первые две трети пути идёт приращение скорости, а на остальной части пути – падение скорости.
Чтобы это было наглядно, в примере ниже для для бордового прямоугольника использовал значение keyTimes для придания неравномерности движения. Синий прямоугольник движется в соответствии с атрибутами по умолчанию. То есть скорость анимации для него зависит только от соотношения длины пути и времени.


Как и было задано атрибутом keyTimes бордовый прямоугольник обгоняет на первой дистанции пути синий прямоугольник, который движется равномерно, но в конце пути бордовый прямоугольник уменьшает скорость и синий прямоугольник догоняет его. На финиш оба прямоугольника приходят одновременно. Так как длина пути и общее время анммации для обоих прямоугольников было одинаково.

Ещё один пример с использование keyTimes.
Смайлик, который подмигивает одним глазом при клике.

⇚ Генератор keysplines
Следующая ⇛  Безье второго порядка

Генератор keysplines


Атрибут keySplines определяет набор контрольных точек Безье, связанных со списком keyTimes, определяя кубическую функцию Безье, управляющую временным интервалом.
От формы кривой Безье зависит неравномерность движения внутри временного интервала. Один и тот же путь может быть пройден с разными скоростями в начале, середине или в конце пути.
Перетаскивайте мышкой красные контрольные точки и наблюдайте в правом окне график скорости.
Далее копируйте цифры в атрибут keySplines 0.06 0.925 0.205 0.88

В первом примере движение бордового шарика начинается очень быстро и медленно заканчивается

grafic












Во втором примере движение бордового шарика начинается очень медленно и быстро заканчивается

wisely-slow

Сравните движение бордового шарика с движением синего шарика движущегося с линейной скоростью.










⇚ Безье второго порядка
Следующая ⇛  Генератор keyTimes

Генератор эллипсов



Для получения необходимых размеров эллипса и расположения центра эллипса, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.


Автор: Peter Collingridge

Update В формуле из генератора эллипсов необходимо заменить circle на ellipse

Примеры анимации эллипсов

Начальная фигура, которую будем анимировать


Изменение атрибута эллипсаrx

Изменение атрибута эллипсаry

Другие примеры анимации здесь

⇚ Генератор окружностей
Следующая ⇛  Кубическая кривая Безье

Генератор окружностей



Для получения нужного диаметра окружности и расположения центра окружности, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.


Автор: Peter Collingridge

Пример стилизации трех окружностей

При каждом изменении параметров копируем формулу svg окружности в отдельный файл и добавляем заполнение цветом кругов.

Более подробно о параметрах окружностей здесь.

Пример анимации кругов

Анимация последовательного перемещения кругов из левого положения вправо и обратно.
Команды перемещения первой окружности вправо и назад:

где values=”50;350″ горизонтальные координаты начального и конечного положения центра окружности.

Ниже полный код анимации перемещения окружностей

Начало анимации по клику мышки на жёлтом круге.

⇚ Генератор прямоугольников
Следующая ⇛  Генератор эллипсов

Генератор прямоугольников


Автор: Peter Collingridge


Для получения нужного размера прямоугольника и расположения левого верхнего угла, измените координаты цветных точек управления,- для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите соответствующую точку.
Скопируйте код SVG.

Пример стилизации

Удобно, что заранее видно, как будет выглядеть фигура. Можно сразу разместить например,- три прямоугольника и раскрасить их в разные цвета.

Пример простой анимации

Анимация замены местами крайних прямоугольников.
Команда выполнения анимации для левого прямоугольника:

, где values=”30;330;330;30;30″ список изменения горизонтальных координат верхнего левого угла прямоугольника.

Другие примеры анимации здесь

⇚ Генератор прямых отрезков
Следующая ⇛  Генератор окружностей

Генератор прямых линий



Для получения нужного напрвления, длины линии, измените положение цветных точек управления, для этого наведите курсор на одну из точек и удержива¤ левую клавишу мышки переместите точку.
Скопируйте код SVG.


Автор: Peter Collingridge

Следующая ⇛  Генератор прямых отрезков