@xutegino

По какому принципу определяется вектор движения курсора?

Как определять направление откуда юзер передвигает курсор, чтобы показывать, например, разную анимацию?

Пример:

https://www.tradingview.com/symbols/BTCUSD/ - наводим мышку на любой из дропдаунов, двигаем по меню вниз - анимация идет слева направо, если двигаем мышку вверх - анимация справа налево.

https://stripe.com/nl - тоже дропдаун навигация. Двигаем слева направо - одна анимация, справа налево - другая.

Как это реализовать?
  • Вопрос задан
  • 412 просмотров
Решения вопроса 2
@MadridianFox
Web-программист, многостаночник
Элементарно: при каждом событии движения мыши берём координаты, вычитаем из них запомненные координаты от предыдущего события и получаем вектор движения. Т.е. если сначала были координаты {50;50}, а стали {49;60}, то мышка сдвинулась в сторону {-1;10}, т.е. вниз и чуть чуть слево.
Можно сглаживать вектор движения учитывая координаты не двух измерений, а например, последних 4-5.

UPD: посмотрел примеры. Тут можно не привязываться к вектору движения мыши, ведь логика завязана на то - переходим ли мы с предыдущего пункта на следующий или со следующего на предыдущий.
Т.е. при наведении мыши на пункт определяем индекс элемента на который навели. Запоминаем. Если мышь переместилась на другой пункт, то берём его индекс и сравниваем с запомненным. Если больше - то одна анимация, меньше - другая. Если нет запомненного индекса, то можно ещё и третью анимацию прикрутить.
Ответ написан
В данном случае скорее всего вычисляют не направление движения курсора, а то, предыдущее меню было слева или справа, сверху или снизу, в этом конкретном кейсе менее затратно.
Хотя в первом варианте кроме прочего похоже работает вот эта математика https://habrahabr.ru/post/171905/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы