Здесь будет представлено в общих чертах, под какими переменными melAnim экспортируется в глобальную область видимости и аргументы к экспортированным функциям. При встрече типа, будет ссылка на его детальное определение.

1. Содержание

2. Общие экспорты

Проект экспортируется в глобальное пространство имён под именем вызываемого объекта melAnim, что является ссылкой на процедурную функцию анимирования. К ней подмешаны несколько свойств.

3. Структура melAnim

melAnim

ссылка на функцию animate

CSSAnimation

конструктор анимаций на CSS (W3C)

ClassicAnimation

конструктор анимаций CSS на JavaScript. Реализация стандарта CSS3 анимаций

hooks

объект с операциями, хранящими функции, помогающие представлять, интерполировать и отрисовывать незнакомые свойства

aliases

объект с алиасами для временных ключей или функций смягчения

vendorize

ссылка на функцию getVendorPropname, помогающей подобрать вендорный префикс к свойству стилей, ГО или любого другого объекта

beforeReflow

либо ссылка на встроенную функцию requestAnimationFrame, либо её реализация на JavaScript

css

ссылка на функцию css, отвечающую за присваивание и получение строкового значения свойств из стилей

normalize

ссылка на функцию normalize, отвечающую за перевод строкового значения свойства в машино-читабельное и обратно

normalizeUnits

объект с хуками для преобразования из численного в строковый, или наоборот.

Следует немного уточнить насчёт некоторых свойств :

3.1. melAnim.hooks

Объект хранит в себе хуки для расширения списка свойств, поддающихся анимированию.

3.1.1. Структура melAnim.hooks

Делится на несколько подуровней. На первом имя свойства, на втором — операции. На каждую операцию можно установить только один обработчик.

3.1.1.1. Список предопределённых операций

"get" или melAnim.hooks.GET

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

"set" или melAnim.hooks.SET

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

"blend" или melAnim.hooks.BLEND

вычисление значения между двумя точками по известному прогрессу перемещения между ними. Формат аргументов пока не определён

"normalize" или melAnim.hooks.NORMALIZE

перевод значения свойства из строкового в машино-читабельный — пригодный для действия blend. Формат аргументов такой же, что и у normalize.

3.1.1.2. Пример

    /*
    *HOOKS [ PROPERTY_NAME ] = {
    *    ACTION: HANDLER
    *}
    */
    melAnim.hooks[ "double-width" ] = {
        'get': function (/* args */) { /* hook body */ },
        'set': function (/* args */) { /* hook body */ },
        'blend': function (/* args */) { /* hook body */ }
        // ну и так далее
    };

3.2. melAnim.aliases

Встроенные алиасы определены в файле aliases.js, их включение в конечный код регулируется флагом INCLUDE_ALIASES

3.2.1. Структура melAnim.aliases

Приближения кубических кривых не могут использоваться в CSS анимации

"keys"

алиасы для временных ключей. Примером таких же алиасов можно считать строки from и to из ключей CSS3 Animation

"bezierPoints"

аргументы к временной функции CSS “кубической кривой Безье”. Точки отсюда могут использоваться как в CSS анимации, так и в анимации на JavaScript

"bezierApprox"

приближения кубических кривых. Хранят в себе обычные JS-функции, которые являются приближениями одноимённой кубической кривой из алиасов опорных точек.

3.2.1.1. Примеры

Определение алиаса времени ключевого кадра

    melAnim.aliases.keys[ "half" ] = 50;
    // теперь можно указывать "half" вместо "50"

Определение алиаса к точкам кубической кривой Безье

    melAnim.aliases.bezierPoints[ "my-linear" ] = [ 0.0, 0.0, 1.0, 1.0 ];
    // теперь можно указывать "my-linear" как функцию смягчения

Определение алиаса к приближению кубической кривой. Формат аргументов пока не определён.

    melAnim.aliases.bezierApprox[ "my-linear" ] = function (/* easing args */) { /* easing body */ };
    // теперь можно указывать "my-linear" как функцию смягчения, но только для JS-анимации

3.3. melAnim.normalizeUnits

Обычный объект с хуками, предназначенными для normalize, для преобразования значения из строкового в численный.

Эти хуки разделены не по свойствам, а по единицам измерения, поэтому они не находятся в объекте с хуками для свойств.

Каждый хук принимает 3 аргумента, в точности как у normalize, за исключением аргумента toString, и должен вернуть числовое представление свойства.

Хук будет вызван, если не существует хука для преобразования значения свойства в melAnim.aliases.

3.3.1. Структура melAnim.normalizeUnits

    /*
    *normalizeUnits [ UNIT ] = HOOK;
    */
    melAnim.normalizeUnits[ "double-px" ] = function (element, property, value) {
        return melAnim.normalizeUnits[ "px" ] * 2;
    };

    // теперь можно указывать единицы измерения double-px, напр. "5double-px", что будет в итоге "10px"