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

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций 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-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).

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

  • «VcorpJS» - Главная страница раздела
  • Основные сведения
  • Подключение и инициализация VcorpJS
  • Типовой CSS-файл
  • Краткий обзор и правила, список всех функций.
  • Работа с функциями различного назначения
  • Функции общего назначения
  • Работа с классами и стилями
  • Работа с coockie
  • Работа со слоями (layers)
  • Управление событиями, спец-объект и обработчики
  • Работа со встроенными плагинами
  • Плагины VcorpJS - краткий обзор и правила
  • Перетаскивание объектов
  • Многоуровневые анимационные меню
  • Галереи изображений
  • Блоки ротации изображений
  • Модальное диалоговое окно
  • Модальное окно сообщения
  • Переключатели-флажки checkbox
  • Форматированный ввод данных
  • Поля ввода со списком выбора - combobox
  • Календарь (datepicker)
  • Оконная система
  • Оконная система - краткий обзор и правила
  • Настройка окон и оконная callback-функция
  • Функции работы с окнами
  • Работа с панелью окон
  • Табличный вывод данных Grid
  • Grid - краткий обзор и правила
  • Функции работы с Grid
  • Анимация объектов
  • Краткий обзор и правила анимации
  • Базовая функция анимации
  • Функции - обёртки анимации
  • POST запросы VcorpJS
  • POST запросы VcorpJS
  • Canvas и SVG - графика
  • Canvas - краткий обзор и правила
  • SVG - графики (charts)
  • Скачать vcorp_js_00_80.zip (35 Kb - js и css файлы)
  •  
  • Vcorp.ru - Главная страница сайта
  • Тест больших гридов в перемещаемых окнах
  • Тестирование 3D графики в браузерах
  • «Vcorp Generator» - Главная страница раздела
  • «Lazarus fpCEF3» - Главная страница раздела
  • Открывать окно навигации
    <<<
    Изменить высоту >>