Генератор keysplines


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

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

grafic












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

wisely-slow

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










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

Онлайн инструменты SVG

Начинаю новый раздел – онлайн инструменты. Для чего? Конечно для наглядности и удобства пользователей сайта. Вручную не трудно написать команды основных фигур SVG: line, polyline, polygon, rect, circle, ellipse, но это нужно скорее для приобретения практических навыков написания кода SVG. Гораздо сложнее написать команду path, например для кривых Безье. Вернее написать можно, опираясь на теоретические формулы, но вот сразу подобрать нужную форму кривых, комбинируя парами параметров довольно сложно и трудоёмко. Графические редакторы облегчают эту задачу, но там своя специфика: необходимо чистить, оптимизировать код, правда и для этого есть свои инструменты, но зачем тратить столько усилий, когда нужна всего одна или пара кривых, которые можно наглядно создать в онлайн инструментах за несколько секунд и получить чистый SVG код.

Перечень онлайн генераторов кода SVG