Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > эффект отставания


Автор: neoks 1.8.2013, 12:24
Не знаю как называется, может кто видел к примеру когда за курсом следует какой та элемент, во флеше много раз видел, так вот элемент следует за курсором с эффектом отставания, чем быстрей двигать курсор тем сильней эффект и элемент не успевает за курсором отставая от него на некоторое расстояние.
Не подскажите как это делается или примерчик какой есть ?)

Автор: CruorVult 1.8.2013, 12:49
Подписываемся на событие mousemove, получаем координаты курсора и с помощью setTimeout делаем отложенное размещение элемента по текущим координатам. А если получится "хорошо" написать код, то может и не понадобится  делать setTimeout  smile 

Автор: neoks 1.8.2013, 14:00
Цитата(CruorVult @  1.8.2013,  12:49 Найти цитируемый пост)
Подписываемся на событие mousemove, получаем координаты курсора и с помощью setTimeout

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

Автор: CruorVult 1.8.2013, 14:32
Ну все верно

http://jsfiddle.net/uTZ4w/2/

Автор: neoks 1.8.2013, 14:39
Цитата(CruorVult @  1.8.2013,  14:32 Найти цитируемый пост)
CruorVult

Удивительно, никогда бы не подумал что оно сработает, но на практике видно что пашет отлично. 
Спасибо! smile

Добавлено через 14 минут и 3 секунды
И все таки почти, не знаю почему заметны подергивания + это получается что дубль позиции курсора, хотелось бы как сказать, чтобы объект двигался к курсору а не повторял его траекторию с задержкой. 
У меня получается есть объект который движется по карте и к нему прикреплена камера, камера зафиксирована на объекте и получается когда объект сталкивается то он резко тормозит и с ним камера.

Автор: neoks 1.8.2013, 15:26
Все разобрался, кому нужно вот примерчик!

Код

x = xs + ((x - xs) * 0.1);
y = xy + ((y - xy) * 0.1);

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)