Изменение позиции объекта

@Harrison · Регистрация: 07.11.2010

Author24 — интернет-сервис помощи студентам

Здравствуйте.
Есть div меняющий положение от одной точки к другой, как добавить ещё позицию, чтобы после того, как дойдёт до точки 2, двигался в точку 3? Например сейчас направо и вниз двигается, и как сделать, чтобы потом двигалось вверх..?
Или это на JQuery лучше?

HTML5

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
</head>
<body>
 
<div id="dat" style="display:inline-block; position:fixed; left:100px; top:200px; width:50px; height:50px; background-color:red;">
</div>
 
 <script type="text/javascript">
 var dat1=document.getElementById("dat");
 function dat(elem) {
    var left = 0; // начальное значение
    var top = 70;
    function frame() { // функция для отрисовки
        left++;
        top++;
        elem.style.left = left + 'px';
        elem.style.top = top + 'px';
        if (left == 100) { 
          clearInterval(timer); // завершить анимацию
        }
    }
    var timer = setInterval(frame, 10) // рисовать каждые 10 мс
}
dat(dat1);
</script>
 
</body>
</html>

@massEffect · 17.12.2014, 17:29

Не понятно в чем проблема, в чем трудность?, делайте хоть 100 позиций

@Thisman · 18.12.2014, 09:10

Harrison, Движение-жизнь!

Javascript

console.clear();
 
var object = {
  element : document.getElementById("block"),
  indexVector : 0, // индекс текущего вектора в массиве vectors
  paths : [], // список путей, который должен пройти объект, что бы сменить направление
  vectors : [], // список векторов, каждый соответствует своей точке
  lastTurn : []
};
 
object.vectors = [
  // заполняем векторы
  [4,0],
  [0,4],
  [4,0],
  [4,3]
];
object.paths = [
  // длины путей
  200,
  420,
  300,
  650
];
object.lastTurn = [object.element.offsetLeft, object.element.offsetTop];
 
/* Алгоритм будет таков
   Изначально задумывалось, что бы была проверка по координатам, 
   если объект дошел до нужной координаты, то меняем на правление
   Но, тут куча подводных камней, 
   а вдруг мы указали неверно вектор и объект не пройдет через координату,
   да и проверять координаты в данном случае не очень верно.
   Мы будем использовать расстояние между двумя точками, 
   как только объект пройдет нужное расстояние, меняем ему вектор направления
   Нет проблем с координатами, проверка выглядит легче
   Просто запоминаем место, где объект повернул в последний раз 
   и считаем расстоянием между текущим положением объекта и тем самым местом поворота
*/
 
// движение объекта
object.move = function () {
    if(!this.paths[this.indexVector]) return clearInterval(time); // если прошли весь путь, то заканчиваем движение
    var v = this.vectors[this.indexVector];
    
    // Двигаем объект
    this.element.style.left = this.element.offsetLeft +  v[0] + "px";
    this.element.style.top = this.element.offsetTop + v[1] + "px";
  
    // Проверяем
    var x = this.element.offsetLeft;
    var y = this.element.offsetTop;
    
    // длина пройденного пути
    // считаем вектор между двумя точками
    var _vector = [Math.abs(this.lastTurn[0] - x), Math.abs(this.lastTurn[1] - y)];
    // считаем его длину
    var path = Math.sqrt(_vector[0] * _vector[0] + _vector[1] * _vector[1] );
  
    console.log(path, this.paths[this.indexVector]);
    // Если прошли столько, сколько нам нужно, поворачиваем
    if(path >= this.paths[this.indexVector]) {
       this.indexVector ++;
       this.lastTurn = [x,y];
    }
    
};
 
 
var time = setInterval(function () {
  object.move([1,0]);
},17);

@Harrison · 19.12.2014, 08:50 **[ТС]**

Вот ещё вариант, кажется проще:

HTML5

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>    
$(function() {
    
   $('div').css({"position": "fixed", "z-index": "1", "min-width": "0"});
    var timespan = 500;
    cycleEffects();
    function cycleEffects() {
        $('div')
            .animate({left: "+=100"}, timespan, "linear" )
            .animate({left: "-=100", top: "+=200"}, timespan, "linear")
            .animate({left: "+=100"}, timespan, "linear")
            .animate({left: "-=100", top: "-=200"}, timespan, "linear", cycleEffects)
    }
});
</script>
 
<body>
 
<div id="dat" style="display:inline-block; position:fixed; left:100px; top:200px; width:50px; height:50px; background-color:red;">
</div>
 
</body>
</html>

@massEffect 80 / 80 / 53 Регистрация: 22.03.2013 Сообщений: 271
	17.12.2014, 17:29	2
	Не понятно в чем проблема, в чем трудность?, делайте хоть 100 позиций 1

	19.12.2014, 08:50

Изменение позиции объекта

Решение