Keyframe based animation framework

Все методы и свойства описаны в коде с помощью JSDOC. На этой странице будут описаны только основные экспортируемые классы и функции, их методы и аргументы.

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

2. animate

Функция для процедурного анимирования элементов — т.е. без создания экземпляров, в один вызов.

3. Animation

Основной класс-строитель для создания экзепляров.

4. CSSAnimation

Конструктор анимаций с использованием графического ускорителя — CSS3 Animation.

5. ClassicAnimation

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

6. vendorize

Функция попытается подобрать вендорный префикс к свойству, применяя при этом преобразование имени свойства из CSS-формата в DOM-формат.

Возвращаемое значение — верное имя свойства, или null, если подобрать не удалось.

6.1. Формат аргументов

    function vendorize(propertyName, target);

Где:

propertyName
имя свойства
target
Где смотреть наличие свойств — в CSS при false, в window при true, или в переданном объекте Тип — Boolean или Object.

6.2. Примеры использования

    // вернёт performance в Chrome
    melAnim.vendorize("performance", true);

    // вернёт webkitNow в Chrome
    melAnim.vendorize("now", window.performance);
    
    // вернёт textShadow в Chrome
    melAnim.vendorize("text-shadow", false);

7. beforeReflow

Исполнит функцию перед следующей отрисовкой. Если браузер не имеет встроенной реализации requestAnimationFrame, то будет использован таймер отрисовки на window.setTimeout — один для всех обработчиков. Экспортируется для совместного использования таймера отрисовки как melAnim, так и любого другого кода.

7.1. Формат аргументов

    function beforeReflow(callback);

Где:

callback
функция, которая исполнится перед отрисовкой. Ей будет передано первым аргументом текущее время в формате timestamp.

7.2. Примеры использования

    melAnim.beforeReflow(function (timestamp) {
        alert( timestamp ); // выведет текущее время
    });

8. css

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

8.1. Формат аргументов :

    function css(element, propertyName [, propertyValue])

Где:

element
объект, с которым функция будет работать. Тип — HTMLElement или CSSStyleDeclaration
propertyName
имя свойства, с которым функция будет работать. Тип — String (строка).
propertyValue
значение свойства. Необязательный аргумент. Его передача переводит css из режима получения значения в режим установки свойства. Тип — Number, или String, или Array.

8.2. Примеры использования

    // установит <body> красный цвет текста
    css(document.body, "color", "red");

    // установит переданному стилю размер шрифта, равный 20 пикселям
    css(document.body.style, "font-size", "20px");
    
    // и так далее, по аналогии

8.3. Пример хука

    // установка величины прокрутки с помощью css
    melAnim.hooks [ "scrollTop" ] [ "set" ] = function (element, propertyName, propertyValue) {
        element.scrollTop = propertyValue;
    };
    
    // получение значения кастомного свойства "myProp"
    melAnim.hooks [ "myProp" ] [ "get" ] = function (element, propertyName, propertyValue) {
        // что здесь будет находиться, определит ваша фантазия :)
        element.style.borderWidth = propertyValue;
    };

9. normalize

Преобразует строкое представление значения в машино-читабельное или наоборот. Передача элемента необходима для трансляции в другой тип значения — к примеру, из процентов и пиксели.

    function normalize(element, propertyName, propertyValue, toString)

Где:

element
объект, с которым функция будет работать. Тип — HTMLElement или CSSStyleDeclaration
propertyName
имя свойства, с которым функция будет работать. Тип — String (строка).
propertyValue
значение свойства. Тип — Number, или String, или Array.
toString
определяет поведение. Если передано значение true, то функция приведёт числовое значение в строковое, и если false — то в числовое. Тип — Boolean.

9.1. Пример использования

    // формат по-умолчанию установлен "PX"

    // переведёт проценты в числовое значение
    normalize(document.body, "width", "50%", false); // 960
    
    // и приведёт числовое значение в строку
    normalize(document.body, "width", 960, true); // "960px"

9.2. Пример хука

    // хук для значения прокрутки
    melAnim.hooks[ "scrollTop" ] ['normalize'] = function (element, propertyName, propertyValue, toString) {
        return element.scrollTop;
    };
    
    // хук для перевода значения матрицы 2D трансформации
    melAnim.hooks[ "transform" ] ['normalize'] = function (element, propertyName, propertyValue, toString) {
        if (toString) {
            return "matrix(" + propertyValue.join(", ") + ")";
        } else {
            return propertyValue.match(/matrix\(([^\)]+)\)/).split(",").map(function (x) { return parseInt(x, 10); });
        }
    };
Fork me on GitHub