Создание анимации. Метод animate

В предыдущих параграфах мы посмотрели специальные методы, которые управляют высотой элемента, прозрачностью, видимостью. Однако эти методы не покрывают все потребности по созданию эффектов и анимации. Нередко требуются более сложные по характеру анимации. И здесь нам помогает метод animate().

Метод animate() принимает набор свойств элемента, которые затем изменяются, за счет чего достигается анимация.

Данный метод имеет следующую форму использования: animate(properties [,duration] [,easing] [,complete])

Обязательный параметр properties содержит набор css-свойств, у которых указываются финальные значения.

Параметр duration указывает, как долго будет длиться изменение прозрачности элемента. По умолчанию его значение равно 400 миллисекунд. Также можно использовать значения 'slow' и 'fast', которые соответствуют длительности эффекта в 600 и 200 миллисекунд.

Параметр easing принимает название функции плавности анимации в виде строки. По умолчанию его значение равно "swing".

Параметр complete представляет функцию обратного вызова, вызываемую методом по завершении анимации

Используя анимацию, важно иметь в виду, что в данном случае мы можем использовать только те свойства css, которые принимают числовые значения, например, ширина и высота. Другие же свойства, как, например, цвета фона или шрифта, мы уже так просто не сможем использовать.

Применим простую анимацию к изображению, изменив ряд его свойств:

<img src="ars.jpg" id="ars" /><br>
<button id="anim">Анимация</button>
<script type="text/javascript">
$(function() {
	$('#anim').click(function(){
		 $('#ars').animate({ opacity: 0.25,
				'margin-left': '50',
				height: '200'});
	});
});
</script>

В данном случае у нас изменяют свое значение три свойства: opacity, margin-left и height. Сама анимация представляет переход от начальных значений к значениям, указанным для свойств в методе animate.

В предыдущем примере у нас жестко кодируются финальные значения свойств. Так, левый отступ после анимации у нас будет иметь значение 50. Но что если мы хотим, чтобы движение постоянно продолжалось при нажатии на кнопку? В этом случае мы можем использовать относительные значения:

$('#ars').animate({
		    'margin-left': '+=50',
			width: '-=10',
			height: '-=10'}, 1000);
	});

Кроме указания относительных значений здесь также использовано время анимации - 1000 миллисекунд.

Чтобы выполнить более детальную настройку анимации мы можем использовать еще одну форму метода animate: animate(properties, options)

Здесь используется новый параметр - options. В этом параметре мы можем указать ряд конфигурационных параметров, которые будут использоваться при анимации. Этот параметр принимает следующие опции:

• duration: продолжительность анимации. По умолчанию равна 400 миллисекунд

• easing: название функции плавности анимации. По умолчанию значение 'swing'

• queue: булевое значение, указывающее, нужно ли поместить анимацию в очередь эффектов. По умолчанию имеет значение true, что значит, что анимация помещается в очередь. Если же присвоить значение false, то анимация будет выполняться немедленно.

• specialEasing: объект javascript, который сопоставляет анимируемые свойства с функциями плавности

• step: функция, вызываемая для каждого анимируемого свойства каждого участвующего в анимации элемента

• progress: функция, вызываемая на каждом этапе анимации по одному разу для каждого элемента вне зависимости от количества анимируемых свойств

• complete: функция вызываемая после завершения анимации

• done: функция, вызываемая при завершении анимации

• fail: функция, вызываемая при ошибке в процессе анимации, если анимация не сможет завершится нормальным путем

• always: функция, вызываемая после завершения анимации вне зависимости, завершится анимация обычным путем или с ошибкой

Конечно, все опции разом необязательно определять и можно остановиться лишь на нескольких. Например, применим ряд из этих опций:

$('#ars').animate({
		'margin-left': '+=50',
		width: '-=10',
		height: '-=10'
		},{
		duration: 1000,
		step: function(now, fx) {
			var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
			$('body').append('<div>' + data + '</div>');
		},
		complete: function() {
			alert('Анимация завершена');
		}
});

Здесь мы использовали три опции: продолжительность анимации и функции по шаговой обработки и завершения.

Весь процесс анимации разбивается на ряд мелких этапов, которые выполняются в течение определенного времени (в данном случае 1000 миллисекунд). На каждом этапе и вызывается функция пошаговой обработки (step: function(now, fx)), причем для каждого анимируемого элемента анимируемого свойства. Она принимает два параметра: now и fx. Now показывает текущее значение на данном этапе анимируемого свойства, а fx содержит данные о анимируемом объекте. Как в данном случае, мы получаем анимируемое свойство (fx.prop) и анимируемый элемент (fx.elem). И затем мы эти данные можем использовать по своему усмотрению.