Универсальная плавная анимация на JavaScript

[>A1RN1kE<]

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

Рабочий пример смотреть===>> Тут

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

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

Здесь может быть всё что угодно, в данном случае мы анимируем параметр left у элемента #car. А теперь сам 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);
}

Когда мы создавали кнопки, мы задали события 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 — принудительное изменение скорости изменения анимируемой переменной, не обязательно указывать
)

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