Как плавно перемещать блок по заданной кривой?

Question

[Капитан Какао]

Всем привет, возникла задача сделать определённую анимацию.
А именно перемещение круга от точки А в точку Б по конкретно заданно траектории.
Вначале реализовал это на CSS анимации, задавая ключевые точки и перемещая по ним фигуру.
Но проблема в том, что траектория которая мне нужна в виде дуги, и на CSS сложно красиво и плавно провести фигуру по такой траектории.
Уверен для этого есть какие-то jQuery библиотеки, буду признателен за любую информацию.

И конечно исходники, что бы наглядно понять суть дела.

https://jsfiddle.net/kr4gwybz/

Answer 1

[Андрей Федоров]

Поиграйте с настройками кривых Безье...
https://codepen.io/aliencash/pen/JMZmGK?editors=1100

Comments

[Капитан Какао]

Супер, это то что нужно!
Только не понятно как вам удалось сделать кривые Бизье чётко по моему рисунку?
Подскажите как это делать, что бы я могу самостоятельно прописать траекторию для других кривых.

[Андрей Федоров]

К сожалению я просто подогнал, чтобы примерно было похоже. Предполагаю если вы будете для кривой в SVG использовать путь на основе кривых Безье https://svg-art.ru/?page_id=907#comm_cubic настройки в точности совпадут с настройками анимации.

[Капитан Какао]

Андрей Федоров, понял. Ладненько, буду разбираться. Большое спасибо.

Answer 2

[Максим Тимофеев]

С траекториями проще всего юзать svg:
https://css-tricks.com/guide-svg-animations-smil/#...
https://codepen.io/SaraSoueidan/pen/184082960ac3cc...
А вот jquery plugin, что бы уйти от SMIL, но все равно траектория в svg, ведь это мега удобно:
https://www.jqueryscript.net/animation/jQuery-Plug...

Comments

[Капитан Какао]

дело в том, что пример который вы показали происходит внутри SVG.
У меня ситуация по сложнее. В ней есть отдельно траектория, и отдельно предмет который нужно по этой траектории перемещать.
Хотя если ни чего не придумаю, придётся всё это переделывать и пихать в SVG как в примере. Но очень не хотелось бы.

[Максим Тимофеев]

Rad Cor, это пример, а как его использовать это уже Ваше дело. svg только лишь описывает траекторию, а двигаться по ней может что угодно