moo.fx.js как легкий standalone функционал для javascript эффектов

В своих разработках я использую самописный JS фреймворк. И все бы хорошо, если бы на днях не потребовалось реализовать функционал с плавной анимацией. В голову приходят 3 варианта развития событий:

1. попробовать взять все необходимое для анимации с фреймворка похожего на jQuery (это оказалось довольно трудоемким занятием)
2. можно написать функционал самому (есть риск плохо продумать архитектуру или недотестить в некоторых браузерах)
3. найти независимый базовый класс с эффектами

Как по мне, вариант 3. самый оптимальный. И тут я наткнулся на moo.fx… =)

К моему удивлению, хабрапоиск фреймворка moo.fx.js ничего не дал, поэтому основной целью топика есть обратить на него внимание. Для разработчика, moo.fx это супер легкий «костяк» для написания приложений с использованием плавной анимации. Его основная задача — дать разработчику базовую архитектуру и интерфейс для написания более сложных эффектов.

Так как я не нашел достаточной документации и примеров использования moo.fx второй версии, я решил кратко остановится на самом формате moo.fx. Движок заслуживает на внимание также потому, что разработчиком есть Valerio Proietti (ведущий разработчик mootools). Сам moo.fx был создан для использования совместно с двумя известными фреймворками mootools и prototype. Вариант использования совместно с mootools тут я рассматривать не буду (так как ищу наиболее легковесное standalone решение). На самом деле подключение всего prototype.js не обязательно, для функционирования moo.fx необходимо подключить так называемый prototype.lite.js, который включен в поставку moo.fx для фреймворка prototype. Существование prototype.lite.js очень радует, так как теперь мы можем пользоваться движком эффектов подключая всего 2 файла:

<script type="text/javascript" src="prototype.lite.js"></script><!-- ~3-4 KB -->
<script type="text/javascript" src="source/moo.fx.js"></script><!-- ~3-4 KB -->

* This source code was highlighted with Source Code Highlighter.

Комплект поставки moo.fx.js для работы с prototype.js:

1. prototype.lite.js (необходимо) — урезанная версия prototype.js специально для работы с moo.fx.js или полная версия prototype.js
2. moo.fx.js (необходимо) — базовая архитектура для эффектов
   Далее по тексту будут подробности
   Здесь можно посмотреть примеры использования moo.fx.js
   
3. moo.fx.pack.js (опционально) — расширение, включающее дополнительные эффекты
   — управление скроллингом (Fx.Scroll)
   — управлением цветом (Fx.Color)
   — добавочные функции rgbToHex(array) и hexToRgb(array)
   Здесь можно посмотреть примеры использования moo.fx.pack.js
   
4. moo.fx.utils.js (опционально) — расширение для анимации высоты, ширины и прозрачности элементов DOM. Хочется отметить, что метод toggle() работает как ожидается далеко не во всех случаях. Проблемы начинаются если выставлять стилевые атрибуты width/height. С другой стороны это добавочный функционал занимает очень мало места и его легко подкорректировать под свои нужды.
   — управление высотой (Fx.Height) [всего 2 метода: toggle(), show()]
   — управлением шириной (Fx.Width) [всего 2 метода: toggle(), show()]
   — управление прозрачностью (Fx.Opacity) [всего 2 метода: toggle(), show()]
   Здесь можно посмотреть примеры использования moo.fx.utils.js
   
5. moo.fx.accordion.js (опционально) — функционал «аккордеон» (можно посмотреть на самой странице moofx.mad4milk.net)
6. moo.fx.transitions.js (опционально) — фнк. плавных переходов на основе Easing Equations от Robert Penner

Основным файлом в данном списке конечно же является moo.fx.js — он содержит реализацию базовой функциональности эффектов. Остальные, по сути, есть стандартными плагинами (надстройками) предоставляющие добавочную функциональность. Все сделано красиво и в духе mootools — подключай то, что сейчас необходимо. Краткое описание интерфейсов надстроек уже было проведено выше, само применение можно увидеть в прилагающихся примерах.

moo.fx.js — базовый функционал (каркас) для эффентов moo.fx

При создании нового эффекта можно менять опции, которые по умолчанию задаются так:

setOptions: function(options){
  this.options = Object.extend({
    onStart: function(){}, //будет вызвана до эффекта
    onComplete: function(){},//будет вызвана по окончании эффекта
    transition: Fx.Transitions.sineInOut,//функция перехода (изменения свойства)
    duration: 500,//продолжительность эффекта
    unit: 'px',//единицы измерения
    wait: true,//ждать пока закончится предыдущий переход?
    fps: 50//время в секундах задается так: Math.round(1000/this.options.fps)
  }, options || {});
}

* This source code was highlighted with Source Code Highlighter.

Я думаю, очень полезно, что изначально в архитектуру заложены параметры wait, onStart(), onComplete() — это позволяет создавать сложные эффекты и их очереди.

Эффекты в moo.js можно поледить на 2 типа:

1. которые манипулируют одним свойством [создаются через new Fx.Style(el, property, options)]
2. одновременно изменяют несколько свойств [создаются через new Fx.Styles(el, options)]

К основным «публичным» методам только что созданного эффекта естественно отнести:

• set: function(to){...} — установка одному или нескольким параметрам некоторых значений
  Пример (кросс-браузерно устанавливает для элемента с id=«someId» значение прозрачности 0.5):
  

  var eff = new Fx.Style('someId', 'opacity');
eff.set(0.5);

* This source code was highlighted with Source Code Highlighter.

  
  
• hide: function(){...} — обнуление некоторого параметра (того, для которого делается анимация). Если это параметр «opacity» — то обычное скрытие элемента
  Пример (скрываем элемент):
  

  var eff = new Fx.Style('someId', 'opacity');
eff.hide();

* This source code was highlighted with Source Code Highlighter.

  
  
• custom: function(from, to){...} — самый ценный метод. Делает плавную анимацию одного или нескольких параметров [от значений from до to]
  Пример (одновременная плавная анимация местоположения элемента):
  

  var eff = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({'top' : [100, 400], 'left' : [300, 200]});

* This source code was highlighted with Source Code Highlighter.

  
  
• clearTimer: function(){...} — досрочное завершение текущей анимации
  Пример (сразу же сбрасываем первое перемещение и начинаем второе):
  

  var eff = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear});
eff.custom({'top' : [100, 200], 'left' : [100, 200]});//начинаем анимацию №1
eff.clearTimer();//сбрасываем анимацию №1
eff.custom({'top' : [300, 100], 'left' : [200, 900]});//начинаем анимацию №2

* This source code was highlighted with Source Code Highlighter.

В данном топике я не хотел сделать полный обзор функционала moo.fx, а лишь пытался в общий чертах обрисовать возможности и архитектуру фреймворка. В заключение хотелось бы отметить, что мне архитектура последней версии (2.0) этого действительно «легкого» фреймворка пришлась по душе. И я планирую его использовать как независимый (standalone) модуль эффектов совместно с другим самописным функционалом, а также написать несколько своих плагинов для дальнейшего расширения его функционала.

Полезные ссылки:

• Официальный сайт проекта
• Документация по предыдущей версии данного фреймворка (для последней я не нашел)
• Некоторые примеры с использованием предыдущей версии (версия 1.2)

P.S. просьба сильно не «торбить», хотелось бы чтобы этот первый топик одновременно не стал последним=).