В своих разработках я использую самописный JS фреймворк. И все бы хорошо, если бы на днях не потребовалось реализовать функционал с плавной анимацией. В голову приходят 3 варианта развития событий:
К моему удивлению, хабрапоиск фреймворка 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 файла:
При создании нового эффекта можно менять опции, которые по умолчанию задаются так:
Я думаю, очень полезно, что изначально в архитектуру заложены параметры wait, onStart(), onComplete() — это позволяет создавать сложные эффекты и их очереди.
Эффекты в moo.js можно поледить на 2 типа:
- попробовать взять все необходимое для анимации с фреймворка похожего на jQuery (это оказалось довольно трудоемким занятием)
- можно написать функционал самому (есть риск плохо продумать архитектуру или недотестить в некоторых браузерах)
- найти независимый базовый класс с эффектами
К моему удивлению, хабрапоиск фреймворка 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:
- prototype.lite.js (необходимо) — урезанная версия prototype.js специально для работы с moo.fx.js или полная версия prototype.js
- moo.fx.js (необходимо) — базовая архитектура для эффектов
Далее по тексту будут подробности
Здесь можно посмотреть примеры использования moo.fx.js
- moo.fx.pack.js (опционально) — расширение, включающее дополнительные эффекты
— управление скроллингом (Fx.Scroll)
— управлением цветом (Fx.Color)
— добавочные функции rgbToHex(array) и hexToRgb(array)
Здесь можно посмотреть примеры использования moo.fx.pack.js
- 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
- moo.fx.accordion.js (опционально) — функционал «аккордеон» (можно посмотреть на самой странице moofx.mad4milk.net)
- moo.fx.transitions.js (опционально) — фнк. плавных переходов на основе Easing Equations от Robert Penner
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 типа:
- которые манипулируют одним свойством [создаются через new Fx.Style(el, property, options)]
- одновременно изменяют несколько свойств [создаются через 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.
Полезные ссылки:
- Официальный сайт проекта
- Документация по предыдущей версии данного фреймворка (для последней я не нашел)
- Некоторые примеры с использованием предыдущей версии (версия 1.2)