Как реализовать инерцию при перемещении элемента на JavaScript?

Question

[irus1an]

Здравствуйте.

Хочу реализовать перемещение элемента за курсором мыши с эффектом инерции. Если элемент движется в одну сторону то у него поднимается одна сторона и наоборот. Это как у машины при торможении нос опускается вниз, а зад поднимается.
Этот эффект реализован здесь: https://thinkingbox.com/
в конце сайта, где 3 надписи Our Collective's Culture.
Перемещение элемента за курсором уже реализовано, не понимаю как сделать этот эффект.
Можно рассчитать ускорение мыши, а дальше как? Как определять угол поворота элемента? И должен ли его центр вращения смещаться?

Answer 1

[Сергей Соколов]

может, вдохновит «цепочка преследования»: за мышкой тянется точка А – каждый кадр её смещение равно расстоянию до цели (мышки) делёному на некий коэффициент. Так что она запаздывает и замедляется по мере приближения.

К точке А тянется такой же логикой точка Б. И ещё несколько можно накинуть для совсем плавного подтягивания к цели. Fiddle без мышки: новые цели случайно выставляются на поле.

На сайте из вашего примера, кажется, только одно звено. А наклон зависит от расстояния до цели.

Upd. Немного экспериментов:

Comments

[irus1an]

Спас, просто спас меня... Спасибо

[irus1an]

А можно немного комментариев? Что такое х и что такое ts (_ts)? И что за значения 50, 2e2 (200) и -3?

[irus1an]

А, про ts нагуглил, я сразу подумал что-то про timestamp и это оказалось так))

[Сергей Соколов]

Наклон, как я представляю, должен проявляться на расстоянии от цели и достигать какого-то максимума, не превышая его. А поблизости от цели его почти не должно быть заметно. График этой зависимости – что-то типа сильно сглаженной, обмыленной, лесенки: ступенька посередине на нуле, и по одной в плюсе и в минусе. График похож на f(x) = x - sin(x) Вот для этой функции я и подбирал на глаз значение x , уменьшая distance на какой-то коэффициент.

ts – timestamp, время в миллисекундах. Оно передаётся параметром при очередном вызове requestAnimationFrame(). Сравнивая его с временем вызова предыдущего кадра _ts получаем, сколько времени прошло с предыдущего просчитанного кадра: на сколько смещать объекты.

Числа – просто подбирал на глаз, чтобы движения были не слишком быстрыми, не слишком медленными.
50 влияет на наклон-от-дистанции;
2e2 на скорость преследования;
-3 на угол наклона.

[irus1an]

Сергей Соколов, ваау. Мое уважение. Спасибо большое. Я-то думал, все дело в ускорении мыши...

[irus1an]

Сергей Соколов, а если взять другую функцию, не ступенчатую, а у которой после первой ступеньки x остается на одном уровне и уходит в бесконечность, то тоже будет работать?

[Сергей Соколов]

если взять другую функцию

irus1an, должно работать. Отчего бы не попробовать? : )

[irus1an]

Сергей Соколов, уже ищу функцию)

[irus1an]

Сергей Соколов, а для чего переменная dt? Она же не используется. И еще вы завели константу distance = target.x - follower.x, потом снова используете выражение target.x - follower.x, хотя можно distance подставить. Исправьте, пожалуйста, вдруг и мой fiddle кому-нибудь потом скинете)

[Сергей Соколов]

irus1an, точно, я ступил: тут вместо / ts должно быть / dt
follower.x += 2e2 * (target.x - follower.x) / ts;
и 2e2 подкорректировать и не делить на 0 в самой первой итерации )

p.s. обновил fiddle.