[Статья] Универсальная плавная анимация на JavaScript

[FullCrazy]

Подключив всего два файла размером не больше десяти килобайт (одна иконка в формате PNG) можно легко создать плавную анимацию любых переменных JavaScript и CSS параметров объектов, например выезжающий блок или изменение размера картинки. Сама функция работает во всех браузерах, кроссбраузерность зависит только от анимированного действия.

Рабочий пример смотреть [Ссылки могут видеть только зарегистрированные пользователи. ]

Теперь рассмотрим по-порядку как такое сделать. Сначала подключаем JavaScript мини-библиотеки:

<script type="text/javascript" src="http://f-ph.ru/js-lib/animate.js"></script>

animate.js — скрипт, отвечающий непосредственно за анимацию. Далее делаем HTML структуру, которую будем анимировать (машина с дорогой и кнопки):

<div id="road" style="width: 100%; height: 150px; position: relative; background-image: url('http://f-ph.ru/files/road.png'); background-repeat: repeat-x; border-radius: 15px;">
<div id="car" style="width: 130px; height: 72px; position: absolute; left: 20px; top: 39px; background-image: url('http://f-ph.ru/files/car.png');"></div>
</div>
<div align="center"><input type="submit" value="< Сюда" onclick="go(0)"> <input type="submit" value="Туда >" onclick="go(1)"></div><br>

Здесь может быть всё что угодно, в данном случае мы анимируем параметр left у элемента #car. А теперь сам JavaScript код, который можно расположить где-угодно на странице:

<script type="text/javascript">
function go(point)
{
	var elem = document.getElementById('car');
	var width = document.getElementById('road').clientWidth - elem.clientWidth - 40;
	var action = function(pos)
	{
		elem.style.left = 20 + pos + 'px';
	}
	animate('car', 0, width * point, 70, 200, 100, action, '', 40);
}
</script>

Когда мы создавали кнопки, мы задали события go(0) и go(1) при нажатии (onClick). Функция go не является обязательной, вы можете указывать при нажатии главную функцию (о ней позже). Функция go находит такое значение, чтобы машина оказалась в конце, а не посередине или за пределом дороги.

Теперь рассмотрим "главную функцию":

animate(
– id — имя, уникально для каждого анимируемого параметра
– start_value — начальное значение анимируемого параметра, любое число
– finish_value — желаемое значение, любое число, большее, меньшее или равное начальному значению
– speed — максимальная скорость (десятков в секунду)
– start_accel — ускорение на старте, положительно число (десятков в секунду в квадрате)
– finish_accel — ускорение на финише, положительно число (десятков в секунду в квадрате)
– action(value, id) — функция, которая выполняется при анмации, принимает мфдгу (текущее значение анимированной переменной) и id (имя, указанное в параметре id функции animate)
– finish_action — функция, которая выполняется в конце анимации, принимает теже значения, что и action, не обязательно указывать
– fps — количество кадров в секунду в анимации
– new_value — принудительное изменение значение анимируемой переменной, не обязательно указывать (быть может анимируемое значение изменила другая функция)
– new_speed — принудительное изменение скорости изменения анимируемой переменной, не обязательно указывать
)

Одному объекту можно задавать сразу несколько анимаций, не зависящиих друг от друга, например ширину и высоту. Полный код, как обычно, можно посмотреть в исходном коде страницы