Сложно. Как сделать физику движения кругу, летящему за курсором?

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

61540b642aa6d293813139.png

Была идея такая у меня:
Высчитывать угол движения мыши, поворачивать круг на этот угол и сжимать его через scaleX и как-нибудь добавить зависимость размера сжатия от скорости. Но это не очень будет выглядеть мне кажется, т. к. scaleX чисто по центру сжимает. Гугл ничего не выдает и словарного запаса на английском не хватает для описания такого.
  • Вопрос задан
  • 594 просмотра
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
Круг это svg элемент. Сам элемент круга рисовать кривыми. Чтоб получилась капля, у одной из кривых смещать точку от центра. Все это сделать заранее и запомнить значения. При движении мышки подсчитывать некоторое значение ускорения и в зависимости от этого значения, смещать точку кривой от одного положения до другого. Для этого можно использовать svg анимацию и передавать в нее прогресс, либо вручную высчитывать положение точки Далее поворачивать всю svg на нужный угол, чтоб конец капли смотрел на курсор. И останется сделать плавное перемещение за курсором. Собственно все.
Ответ написан
Возможно тут что-то найдёте, что поможет в решении вашего вопроса https://starper55plys.ru/javascript-i-jquery/kurso...
Ответ написан
Vindicar
@Vindicar
RTFM!
Ну например так.
Отслеживаешь две точки: центр эллипса, и курсор. Пусть центр эллипса движется за курсором с инерцией и трением, т.е: расстояние между курсором и центром определяет ускорение (не скорость!) центра, при этом каждый фрейм модуль скорости уменьшается (трение).
А потом рисуешь наклонный эллипс с центром в точке центра и фокусом в позиции курсора. Если две точки совпадут, у тебя получится круг.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы