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

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

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

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

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

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

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

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

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

http://javascript.ru/forum/misc/66175-animirovat-n-pikselejj-za-t-sekund.html


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

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

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

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