Морфинг на Mootools

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

В Mootools, морфинг выполняется при помощи класса Fx.Morph, который имеет следующий синтаксис:

var myFx = new Fx.Morph(element[, options]);

Здесь, element – элемент, или его ID; options – дополнительные опции, как то скорость преобразования (duration) и его тип (transition).

Преобразование выполняется при помощи функции Morph.start(), которая принимает в качестве аргумента либо имя класса, либо объект со стилями, которые необходимо установить для объекта:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100,
    'width': 300
});

В этом примере, для скорости указан параметр “short”, что значит быстрый переход, для параметра transition установлено значение Sine.easeOut (подробнее о нем см. здесь). В функцию start() передан объект с двумя свойствами height и width, это значит что объект изменит размер с текущих значений высоты до 100 и 300 пикселей соответственно.

Теперь обратите внимание на следующий, немного измененный пример:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': [10, 100],
    'width': [900, 300]
});

Отличается он тем, что для параметров “height” и “width” установлены начальные значения высоты и ширины, т.е. высота увеличится с 10 до 100, а ширина уменьшится с 900 до 300 пикселей.

А сейчас немного более сложный пример – создадим элемент, который будет плавно изменять свой стиль при нажатии на три ссылки.

Шаг 1: HTML

<a href="#" class="switch-view" rel="view1">View 1</a><br/>
<a href="#" class="switch-view" rel="view2">View 2</a><br/>
<a href="#" class="switch-view" rel="view3">View 3</a><br/>

<div class="view1" id="content-block"></div>

Тут все просто, собственно ссылки и div, стиль которого и будем изменять. Для ссылок указываем имя класса switch-view, для того, чтобы можно было добавить к ним обработчик onclick, а в атрибут rel добавляем имя класса, который нужно присвоить div-у.

Шаг 2: CSS

.view1{
	border:2px solid #fc0;
	color:#000;
	background:#fffea1;
	padding:5px;
	width:400px;
	height:200px;
}
.view2{
	border:9px solid #00f;
	color:#090;
	background:#fcfa56;
	padding:12px;
	width:700px;
	height:400px;
}
.view3{
	border:5px solid #000;
	color:#fff;
	background:#f00;
	padding:10px;
	width:600px;
	height:50px;
}

Это три стиля, которые будут присваиваться div-у.

Шаг 3: JavaScript код

window.addEvent('domready', function() {
	$$('.switch-view').each(function(el) {
		//добавляем обработчик onclick для ссылок
		el.addEvent('click', function(e) {
			var myFx = new Fx.Morph('content-block', {
					duration: 500,
					transition: Fx.Transitions.Sine.easeOut
				});
			myFx.start('.' + el.get('rel'));
		});
	});
});

Принцип работы кода таков – сначала получаем все ссылки с классом switch-view, затем к каждой из них добавляем обработчик, в теле которого объявляется новый объект класса Fx.Morph и сразу же вызывается функция start() для начала преобразований. Имя класса для преобразования получаем при помощи выражения el.get(’rel’).

смотреть демозагрузить пример

Если вы используете библиотеку Prototype, то рекомендую посмотреть статью "использование эффекта морфинга" о том, как можно создать такой же эффект при помощи этой библиотеки.