Анимация - краткий обзор и правила

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Функции анимации VcorpJS доступны только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS

Анимация реализуется базовой функции анимации (кроме плагинов - у них независимая анимация, за исключением всплывания изображений).

В настоящее время очень широко применяется CSS-анимация, поэтому набор стилей, которые можно анимировать через JavaScript, ограничен. Неплохо выглядит смешивание CSS-анимации и JS-анимации.

Каждый объект анимации имеет дескриптор. Чтобы запустить анимацию HTML-объекта, необходимо вызвать для него базовую функцию анимации или обёртку над ней. После этого за объектом закрепляется постоянный дескриптор на всё время работы страницы. Дескриптор можно освободить, убрав анимацию HTML-объекта. В этом внутреннем дескрипторе запоминаются стартовые, конечные и текущие значения анимируемых свойств объекта анимации.

Любой объект можно сколько угодно и как угодно анимировать, в любой момент, при этом предыдущая анимация объекта прерывается, если она не завершена или новые параметры отличаются от предыдущих, и предыдущий дескриптор закрепляется за новой анимацией этого-же объекта. На странице может быть до 99 объектов анимации, активных и неактивных.

Плагин анимации VcorpJS может делать реверс анимации (контролировать изменения объекта таким образом, чтобы новая анимация продолжалась от его текущих значений). Для реверса анимации необходимо, не очищая дескриптор анимации, вызвать анимацию заново с теми-же значениями параметров, но указанными наоборот (нужно поменять местами стартовые и конечные значения, сохранив то же самое количество параметров).

Нужно освобождать дескрипторы после завершения произвольных анимаций, иначе отведённые 99 дескрипторов могут быстро закончиться.
Автоматическое освобождение дескрипторов не происходит по причине возможного реверса той или иной анимации (когда объект должен возвращаться в исходное или в конечное состояние из любой промежуточной позиции).

Из всех плагинов VcorpJS, только плагин галереи изображений использует базовую анимацию и временно занимает свободные дескрипторы (до 10), которые освобождает при завершении увеличения или уменьшения изображения. Остальные плагины используют собственную независимую анимацию.

Используется механизм requestAnimationFrame, если он поддерживается браузером. Толку от этой технологии автор не видит, потому что рендеринг мешает :)
Любые браузеры оптимизируют и без этого механизма (например, старая Opera12 превосходит современные браузеры, даже иногда Chromium, по отзывчивости веб-страницы, несмотря на отсутствие поддержки технологии).
Получается глупая ситуация - на слабом компьютере время рендеринга намного превышает частоту «тиков», а на мощном компьютере вообще нет разницы :)
Так как во время рендеринга абсолютно любой браузер «подвисает», то никакие события вообще не вызываются, код не выполняется, так что автор пока вообще не видит смысла в этой технологии, но оставил поддержку на будущее, мало-ли...

Думаю, что requestAnimationFrame полезна в операциях, не связанных с рендерингом HTML-объектов, например, при рисовании на холсте Canvas.

Функция	Назначение
.animate(...)	Анимация произвольного HTML-элемента. Возвращает дескриптор анимации
.aClear(descriptor)	Принудительный останов анимации по дескриптору
.aWrap(...)	Обёртка над функцией animate() - более простые короткие параметры
.aOpacity(...)	Обёртка - плавное изменение прозрачности HTML-элемента
.aHeight(...)	Обёртка - плавное изменение высоты HTML-элемента
.aWidth(...)	Обёртка - плавное изменение ширины HTML-элемента

См. ниже пример анимации на отдельной странице: Блок с примерами использования функций

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.

Демо - блок с примерами использования функций

Визуальный пример использования ряда плагинов (отдельная веб-страница), в котором продемонстрированы следующие возможности:

• объект управления событиями
• комбинированные списки выбора (combobox)
• анимационные меню
• вывод модального окна сообщения
• работа с окнами и панелью окон
• работа с Гридами (в статичном блоке и в окнах)
• работа плагина анимации
• возможно, что-то ещё...

См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).

Ссылка на страницу: Визуальный пример некоторых плагинов