Использование фасадной функции $t для создания анимаций

В процессе эксплуатации jTweener вылезли некоторые недоработки дизайна библиотеки:

• код, необходимый для создания анимации, получается слишком громоздким;
• очень неудобно создавать анимации с одинаковыми параметрами (например, анимировать 3 объекта с одинаковыми свойствами time и transition, но разными свойствами top и left);
• неудобно добавлять несколько анимаций для одного объекта (приходится каждый раз вызывать jTweener.addTween()).

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

Рассмотрим пример:

var default_options = {
	transition: 'easeoutcubic',
	top: 100,
	time: 2
};

var more_options = {
	opacity: 0.5,
	left: 300
};

$t(document.getElementById('sample'), default_options)
	.tween(more_options, {left: 400})
	.percent(function(value){
		this.style.fontSize = (value * 20 + 10) + 'px';
	});

Сначала мы определяем два объекта с параметрами анимации (default_options и more_options), а затем с помощью функции $t и методов tween() и percent() создаем две анимации.

$t — и есть наш фасад. Ребята, работавшие с jQuery, могут заменить схожесть синтаксиса. Так и есть: с помощью функции $t создается специальный объект, каждый метод которого возвращает сам себя.

Давайте посмотрим на каждый метод по отдельности.

$t(document.getElementById('sample'), default_options)

С помощью такой конструкции вы создаете специальный объект, которому потом можете добавить анимации. Функция $t принимает как минимум один аргумент — объект (или массив объектов), с которыми вы хотите работать. Все остальные аргументы (их может быть несколько) — параметры анимации, которые будут присваиваться объектам по умолчанию. В нашем случае мы говорим, что любая создаваемая анимация по умолчанию должна иметь свойства, указанные в объекте default_options.

.tween(more_options, {left: 400})

Это аналог функции jTweener.addTween() с тем исключением, что туда можно передавать неограниченное количество параметров, каждый из которых — объект с параметрами анимации, которые затем объединяются в один объект в том порядке, в котором они были переданы в функцию. В данном случае, к уже имеющимся у объекта параметрам default_options будут добавлены параметры из more_options, причем параметр left будет перекрыт значением 400. Весь этот код равнозначен вот такому:

jTweener.addTween(
	document.getElementById('sample'), 
	{
		transition: 'easeoutcubic',
		top: 100,
		time: 2,
		opacity: 0.5,
		left: 400
	}
);

Идем дальше:

.percent(function(value){
	this.style.fontSize = (value * 20 + 10) + 'px';
});

Как вы, наверно, уже догадались, это добавление процентной анимации. Синтаксис этой функции аналогичен синтаксису tween() с тем исключением, что в качестве параметра можно отдавать функцию. Этот код аналогичен вызову

jTweener.addTween(
	document.getElementById('sample'), 
	{
		transition: 'easeoutcubic',
		top: 100,
		time: 2,
		__secret_property: function(value){
			this.style.fontSize = (value * 20 + 10) + 'px';
		}
	}
);

Так как каждый метод объекта возвращает сам себя, вы очень легко можете, например, запускать и останавливать анимации:

var anim;

button1.onclick = function(){
	anim = $t([elem1, elem2, elem3]).tween({left: '+=300'});
};

button2.onclick = function(){
	anim.stop();
};

Более подробное описание методов $t вы можете найти в jsdoc-файле с документацией.