Отправляем теги в путешествие (jquery.waypoints)

Jquery.waypoints это плагин для реализации движения объектов по набору точек, так называемым вейпоинтам, с заданной скоростью и другими параметрами, физически имитирующие реалистичность. Частичное описание алгоритма было описано тут ^[1].

Применение

В играх этот алгоритм применяется чтобы переместить игрока от одной точки к другой. Например, у вас есть объект (игрок) и есть точка на карте куда ему нужно переместиться. Если между ними нет преград, то достаточно указать точку начала и точку конца и игрок пройдет это расстояние по прямой. В случае же если есть преграды, то классический метод — это поиск пути ^[2] методом А*, в результате которого получается набор координат точек от трех и более штук, которые потом передаются процессу отвечающему за движение.
Но найти применение этому можно не только в играх, можно сделать динамичный логотип из картинок движущихся по определенной траектории или карту проезда к офису или заводу, указав в качестве фона карту, а в качестве объекта автомобиль или человека. В общем на что хватит фантазии.

Возможности

Движение объекта по набору точек
Движение нескольких объектов по одному набору точек
Движение нескольких объектов по разным наборам точек
Создание нескольких сцен
Установка настроек движения объекта

Как это работает

Все очень просто — создаются 2 дива:

<div id="area">
	<div id="item"></div>
</div>

Где div c id равным area — это сцена, а div c id равным item — это объект, который будет двигаться по заданным координатам

Подключаем необходимый минимум стилей

#area {
	position: relative;
	width: 500px;
	height: 500px;
	overflow: hidden;
}
#item {
	position: absolute;
	width: 128px;
	height: 128px;
	background: url("item.png") no-repeat;
}

И собственно скрипт запуска

$("#area").waypoints({
	item: '#item'
	,waypoints: [[100,100], [400,400]]
});

div c id равным item начнет двигаться по точкам waypoints с заданными по умолчанию, в плагине, значениями

Если же объектов несколько, то код будет примерно такой

$("#area").waypoints({
	angle: 45
	,arrivalThreshold: 25
	,loop: true
	,mass: 0.5
	,maxForce: 0.5
	,pathThreshold: 25
	,position: [250, 250]
	,speedLimit: 5
	,items: [
		//[item, waypoints, loop, speedLimit, maxForce, waypoint, mass, pathThreshold, arrivalThreshold, position]
		['#item1', waypoints_square]
		,['#item2', waypoints_square, true, 2, 0.5, 0, 1.0, 10, 10, [400, 400]]
		,['#item3', waypoints_line]
		,['#item4', waypoints_line, false]
		,['#item5', waypoints_circle, 1, 8]
	]
});

Документация

Совместимость с браузерами

Internet Explorer 9
FireFox 3.6.15
Opera 11.51
Safari 5.0.1
Google Chrome 9.0.570

Тестировалось на PC (winXP, win7)

Смотреть примеры ^[3], ещё ^[4]
Скачать плагин ^[5]

Автор: cybernetic