Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
6 / 6 / 1
Регистрация: 31.08.2012
Сообщений: 230
1

Javascript плавное (непопиксельное) движение элементов

02.02.2014, 22:01. Показов 1883. Ответов 4
Метки нет (Все метки)

Добрый день, в кратце в чем суть:

Допустим есть цветная точка на экране и мы хотим перемещать её из произвольной точки А в точку Б. При чем, со всевозможными скоростями. Так вот, когда скорость маленькая, получается смещение точки dx и dy меньше пикселя, и, например, по У меняется 1 раз в ед. времени, а по Х раз в 10. Получается некрасивое движение "рывками". Как сделать все плавно?

Вот, например, у человека сделано: правда там шел разговор о плавной (квадратичной) изменении скорости, но что-то похожее. Хотя у него выложены исходники, ничего особого я там не нашел.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.02.2014, 22:01
Ответы с готовыми решениями:

Плавное движение линии
делаю к примеру такой код var a=99; var b=1; function f() { while(a>10) { s=0.01;...

Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS
Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно...

JavaScript Движение изображения в зависимости от положения курсора
В общем задумка такая: У меня есть поле ввода и есть картинка. Когда в поле вводятся данные,...

Плавное движение
Здравствуйте, Такая проблема, пытаюсь реализовать лыжника спускающего с горы, иногда переходящую...

4
38 / 38 / 8
Регистрация: 20.07.2013
Сообщений: 105
03.02.2014, 02:26 2
Цитата Сообщение от Greeezly Посмотреть сообщение
Добрый день, в кратце в чем суть:

Допустим есть цветная точка на экране и мы хотим перемещать её из произвольной точки А в точку Б. При чем, со всевозможными скоростями. Так вот, когда скорость маленькая, получается смещение точки dx и dy меньше пикселя, и, например, по У меняется 1 раз в ед. времени, а по Х раз в 10. Получается некрасивое движение "рывками". Как сделать все плавно?

Вот, например, у человека сделано: правда там шел разговор о плавной (квадратичной) изменении скорости, но что-то похожее. Хотя у него выложены исходники, ничего особого я там не нашел.
Достаточно вспомнить, что в длины в CSS можно задавать не только целыми, но и дробными. Тогда всё просто: обновляете вид регулярно через некоторый интервал и при обновлении назначаете должным образом рассчитанные координаты.
0
6 / 6 / 1
Регистрация: 31.08.2012
Сообщений: 230
03.02.2014, 12:23  [ТС] 3
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ...
{
    ....
    setInterval("MapPos(position)",15);
}
 
 
function MapPos(el)
{
    var element = el;
    var epsX = 0.888;
    var epsY = 0.1;
    var br=element.getBoundingClientRect();
    oldX = br.left;
    oldY = br.top;
    element.style.top = (oldY+epsY) + "px";
    element.style.left = (oldX+epsX) + "px";
}
у меня вот такой код.
0
Эксперт JSЭксперт HTML/CSS
2430 / 1108 / 310
Регистрация: 23.06.2011
Сообщений: 3,487
03.02.2014, 21:55 4
Цитата Сообщение от Greeezly Посмотреть сообщение
var element = el;
а это чудо чудное зачем?

я в таких случая вычисляю коэффициент для каждой оси, в итоге для одной оси остается 1, а для второй некая дробь потом собственно приращивание умножаю на сей коэффициент
не нужно читать текущую координату, её лучше хранить в переменной, так быстрее
обычно для этих целей используется рекурсия, а не setInterval
0
6 / 6 / 1
Регистрация: 31.08.2012
Сообщений: 230
04.02.2014, 08:18  [ТС] 5
Цитата Сообщение от newJS Посмотреть сообщение
var element = el;
Это я чтобы не менять значения переменных в функции, у меня просто другие, уже тут на сайте изменил.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.02.2014, 08:18

Плавное движение шайбы
Здравствуйте, у меня такой вопрос, я пишу на AS2 и хотелось бы узнать каким образом можно...

Плавное движение картинки
Добрый день. Необходимо создать плавное прямолинейное движение Image в верхней части формы, так...

Плавное движение вверх
Здравствуйте, есть картинка, как ссылка. Как сделать так, чтобы при наведении на нее мыши, она чуть...

Плавное движение объекта
Здравствуйте. Пытаюсь сделать плавное движение объекта и компилятор выдаёт ошибку. Что не так? ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.