Анимация, рассчет скорости по времени и расстоянию

[spo]

Безуспешно пытаюсь изменить пример с паровозиком отсюда http://plnkr.co/edit/QKkOvATRaCMQBXSbbCdN

В примере дано только время. В моем же условии дано расстояние и время за которое это расстояние должно быть пройдено. Скорость должна рассчитываться автоматически.

Никак не могу сообразить, даже в качестве примера показать нечего. Прошу помощи.

[Malleys]

Дано расстояние и время. Никак не сообразить, что v = s / t?
http://plnkr.co/edit/kVKGHlArdxchoobvsU42?p=preview

[рони]

spo,
var timePassed = time - start;--- сделайте так чтоб эта величина изменялась только от 0 до 1, остальное проще. ответ тамже где вы взяли задачу, но попробуйте сами.

[spo]

Вроде справился

train.style.left = 0;

let currentPosition = parseInt(train.style.left, 10),
	distance = 500,
	movingTime = 4000;

train.onclick = function() {
	animate(function(timePassed) {
		train.style.left = timePassed * (distance / movingTime) + 'px';
		currentPosition = parseInt(train.style.left, 10);
	});
};

function animate(draw) {
	var start = performance.now();
	requestAnimationFrame(function animate(time) {

		var timePassed = time - start;

		// if (timePassed > duration) {
		// 	timePassed = duration;
		// }

		draw(timePassed);

		if (currentPosition < distance) {
			requestAnimationFrame(animate);
		}

	});
}

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

[рони]

И еще закомментированный код из примера

страховка что параметры никогда не будут больше чем нужно. в вашем случае остановка может произойти при distance = 510 (условно)

[рони]

spo,
https://learn.javascript.ru/js-anima...нимации

смотрите в примере animate.js

[xShift]

Посмотрите вот тут. Уже решал эту задачу. Вам нужно вычислить delta и применять ее каждый фрейм.

Анимировать N пикселей за T секунд


Для того, чтобы функция не нарисовала больше или меньше(она это сделает в любом случае). В условии

if (timePassed < duration) {
          requestAnimationFrame(animate);
        } else {
         element.style['propertie'] = destination-position.
        }

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

[spo]

Большое всем спасибо!