OlegTar
@OlegTar
программист .NET, Javascript, Perl

Как сделать плавное перемещение?

Как сделать плавное перемещение объекта? Вариант jQuery взять не могу, мне не для javascript'а надо.

Вот как здесь, например,: otvety.google.ru/otvety/, в блоке «Популярные темы».


Я смотрел код jQuery, ничего там не нашёл, там не так всё открыто.


Мои попытки:


Сначала я решил потренироваться на Javascript'е: подвигать плавно div

Сначала сделал такой вариант:

d = расстояние

t — время, за которое надо пройти расстояние d, в секундах

t1 — начальное время


Вот вырезка из кода:
t1 = new Date();
setTimeout(move);

function move() {
  var t2 = new Date();
  if ((t2 - t1)/1000 > t) {
    div.style.left = d + 'px';
  }
  else {
    div.style.left = ((t2 - t1) / (1000 * t)) * d + 'px';
    setTimeout(move, 50);
  }
}



Но это не то, не так плавно как в Ответах Гугла.

Потом пробовал добавить ускорение:

var a = 1.5;//во сколько увеличивать скорость
var at = 1;//через какое время увеличивать скорость в a раз (a / at — это ускорение)
...
function move() {
  ...
  else {
  var t0 = (t2 - t1) / (1000 * t);
  div.style.left = (t + t * a/at) * d + 'px'
  setTimeout(move, 50);
  }
  ...
}



Тоже не получилось.

Подскажите, если знаете.
  • Вопрос задан
  • 18310 просмотров
Решения вопроса 1
homm
@homm
В код сильно не вникал, бью наугад:
Возможно вы говорите об изинге (easing).
Если представить время от начала анимации до конца как промежуток от 0 до 1, а начальное положение объекта (или другое свойство) и конечное тоже как промежуток от 0 до 1, то функцией изинга называют функцию, дающую в соответствие каждой точке первого промежутка точку второго.

В самом простом случае функция изинга возвращает принимаемое значение без изменений (для начального момента времени возвращает 0, для конечного 1). В этом случае объект движется строго линейно без ускорений и замедлений, оттого движение кажется дерганым и неестественным.

Чтобы придать анимации более плавный вид, нужно имитировать ускорение. В JQuery функция изинга по-умолчанию имеет вид (упрощенно):
function swing(t) {
	return (-Math.cos(p*Math.PI)/2) + 0.5;
}

Т.е. используется синусоидальная зависимость.

Вот примеры того, как работают другие функции изинга, подключаемые сторонним плагином и не входящие в состав jquery:
www.lemonsanver.com/jQuery/easingAnimationPlugin.html

Для того, чтобы воспользоваться таким-же методом работы где-бы то ни было, нужно организовать процесс следующим образом:
1) При старте анимации известна её продолжительность и записывается время старта анимации
2) также известно конечное значение анимируемого параметра (или нескольких), записывается их начальное значение.
3) Периодически вызывается функция анимации (таймер, или цикл). Из текущего времени, времени начала анимации и требуемой продолжительности она находит время t — число от 0 до 1.
4) t передается в в функцию изинга
5) Из полученного значения и данных о начальных и конечных значений параметров высчитываются текущие значение.
6) Пункт 3) повторяется, пока время анимации не истечет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
barmaley_exe
@barmaley_exe
Про анимацию на JS можно почитать тут.
Ответ написан
Посмотрите этот сайт: jstween.blogspot.com/

Там реализация на js плавного движения объектов.

Если вдруг не подойдет, то попробуйте поискать в гугле по словосочетанию:

motion tween algorithm
Ответ написан
Ваш ответ на вопрос

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

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