Javascript-форум - Анимация через линейную функцию

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Анимация через линейную функцию (https://javascript.ru/forum/misc/43112-animaciya-cherez-linejjnuyu-funkciyu.html)

Анимация через линейную функцию

Вот сделал:

<html>
<head>
<script language="javascript">
function start() {
var string_start_x = document.person.style.left;
var string_start_y = document.person.style.top;
var start_x = Number(string_start_x.slice(0, string_start_x.length - 2));
var start_y = Number(string_start_y.slice(0, string_start_y.length - 2));
var end_x = Number(document.data.x.value);
var end_y = Number(document.data.y.value);
var x = start_x;
var y = start_y;
var inc_x = (start_x < end_x)? 1: -1;
var inc_y = (start_y < end_y)? 1: -1;
move(start_x, end_x, inc_x, start_y, end_y, inc_y);
}

function move(x, end_x, inc_x, y, end_y, inc_y) {
if ((x == end_x) && (y == end_y)) return; 
if (x != end_x ) x += inc_x;
if (y != end_y ) y += inc_y;
document.person.style.left = x + "px";
document.person.style.top = y + "px";
setTimeout(move, 10, x, end_x, inc_x, y, end_y, inc_y);
}

</script>
</head>
<body>
<form name="data">
X:
<input type="text" name="x">
<br>
Y:
<input type="text" name="y">
<br>
<input type="button" value="Старт" onClick="start()">
</form>
<img id="person" style="position: absolute; top: 100px; left: 500px;" width=200 height=200 src="images/search.jpg">
</body>   
</html>

Но проблема: картинка движется не по кратчайшему пути(сначало доходит до меньшего значения x или y, а потом движется уже только по 1 значению
Не вобщем вот картинка:

Потом я решил сделать это при помощи линейной функции y = kx + b,
только вот что-то не получается. Вот код:

<html>
<head>
<script language="javascript">
function start() {
var string_start_x = document.person.style.left;
var string_start_y = document.person.style.top;
var start_x = Number(string_start_x.slice(0, string_start_x.length - 2));
var start_y = Number(string_start_y.slice(0, string_start_y.length - 2));
var end_x = Number(document.data.x.value);
var end_y = Number(document.data.y.value);
var inc_x = (start_x < end_x)? 1: -1;
var inc_y = (start_y < end_y)? 1: -1;
var k = (end_y - start_y)/(end_x - start_x) 
var b = (end_x*start_y - start_x*end_y)/(end_x - start_x) 
move(start_x, end_x, inc_x, start_y, end_y, inc_y, k, b);
}

function move(x, end_x, inc_x, y, end_y, inc_y, k, b) {
if ((x == end_x) && (y == end_y)) return; 
if (x != end_x ) {
var x += inc_x;
var y = k*x + b;
}
document.person.style.left = x + "px";
document.person.style.top = y + "px";
setTimeout(move, 10, x, end_x, inc_x, y, end_y, inc_y, k, b);
}

</script>
</head>
<body>
<form name="data">
X:
<input type="text" name="x">
<br>
Y:
<input type="text" name="y">
<br>
<input type="button" value="Старт" onClick="start()">
</form>
<img id="person" style="position: absolute; top: 100px; left: 500px;" width=200 height=200 src="images/search.jpg">
</body>   
</html>

Помогите исправить ошибку во 2 коде, или доработать его! заранее спасибо

Цитата:

Сообщение от Apelcun77

я решил сделать это при помощи линейной функции y = kx + b

В этом случае у тебя должен инкреминироваться только X. Значение Y определяется функциональной зависимостью...

Также интересует данный вопрос.
Как нужно изменить вышеуказанный код для того, чтобы x и y изменялись одновременно и картинка двигалась по прямой?

Skriptor,
http://learn.javascript.ru/js-animation

Когда прочтете, то для функции animate можно передать такую функцию step:

var animatedParams = [
 {
   name: "width", 
   start: 100,
   end: 250
 },
   name: "left",
   start: 15,
   end: 78
 }
];

var animatedElement = ...;

var step = function (progress) {
  animatedParams.forEach(function (animatedParam) {
    animatedElement.style[animatedParam.name] = (animatedParam.start + (animatedParam.end - animatedParam.start) * progress) + "px";
  });
}

animatedParams - массив параметров которые надо анимировать с именем анимируемого стиля, стартовым и конечным значением
animatedElement - элкмент который анимируем

Таким образом можно анимировать сколько угодно параметров в едениуц времени. Только такая функция не предполагает префиксов для CSS3, но направление мысли должно быть ясно ;)

Цитата:

Сообщение от tsigel (Сообщение 348372)

animatedParams - массив параметров которые надо анимировать с именем анимируемого стиля, стартовым и конечным значением
animatedElement - элкмент который анимируем

Это немного концентрированно, а хотелось бы понять логику алгоритма "на пальцах" как говорится. То есть, исходя из первоначально изложенного кода здесь в теме.

Цитата:

Сообщение от ksa (Сообщение 282245)

Что Вы имеете в виду? Что нужно исправить в коде для этого?