@Isotheos

Как задать кривую Безье для регулирования скорости пошаговой анимации?

Доброго времени суток.
Сабж задачи, с которой я столкнулся, указан в заголовке, поэтому просто постараюсь расписать подробнее на примере.
Допустим, есть скрипт, двигающий элемент на странице и вызывающий сам себя до тех пор, пока элемент не дошел до нужного места. Соответственно, скорость получается линейной, в каждом вызове функции к положению элемента добавляется одинаковое значение, равное:
(точка конца - точка старта) / количество шагов

Меня же больше интересует возможность сделать скорость криволинейной, по заданной кривой Безье. Есть ли у вас какие-либо подсказки, в каком направлении рыть?
И да, изначальная задача несколько обширнее и сложнее, чем показанный пример, но загвоздка именно в использовании непостоянной скорости.

Простейший пример кода функции (да, я знаю о функции .animate() у jQuery, см. предыдущий абзац:))
function animate_rect(i,step) {
  var rect = $('#rect');
  var pos = rect.position();
  rect.css({top:pos.top + ((200 - pos.top) / (step - i))});
  i++;
  if (i < step) setTimeout(function() {animate_rect(i,step)},10);
}
animate_rect(0,100);
  • Вопрос задан
  • 3046 просмотров
Решения вопроса 1
@Isotheos Автор вопроса
Всем спасибо, зная что искать, нашел нужную инормацию - learn.javascript.ru/js-animation
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
gbg
@gbg
Любые ответы на любые вопросы
Вас наверняка заинтересует Интерполяционный многочлен Лагранжа

Эта штука позволяет по заданному набору (координата, где сейчас находимся, скорость) построить плавную кривую, эти точки соединяющую. Вам останется только вычислять скорость в каждой точке по полученной формуле.
Ответ написан
Комментировать
@neolink
из текста так и не понятно почему же не animate?
вот на тему - easing функции easings.net/ru
генератор easing функции на основе кривой безье: https://github.com/rdallasgray/bez
Ответ написан
Ваш ответ на вопрос

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

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