Плавная анимация
на iPhone и iPad

Всем известно, насколько популярен стал мобильный браузинг. На современных устройствах веб все меньше и меньше уступает настольному оригиналу. Однако есть один камень преткновения: скорость. Хоть на выходе мы и получаем красиво отрисованную веб-страницу, производительность рендеринга и JavaScript оставляет желать лучшего.

Особенно это заметно на всевозможных слайдшоу: на мобильных и планшетах они тормозят, глючат, мерцают и всячески портят впечатления. Сегодня мы заставим анимацию работать идеально на iPhone и iPad.

Чтобы понять о чем идет речь, достаточно открыть в Mobile Safari любую страницу с анимацией, да вот хотя бы домашнюю страницу популярной галереи jquery.cycle. На компьютере все плавно и замечательно, а на iPhone — тормозящий мрак. На реальных слайдерах с большими фотографиями ситуация еще хуже.

Можно было бы подумать, что маленькому девайсу не под силу выжать больше, однако это не так. Умудряются же работать без тормозов некоторые интерфейсы, в частности фреймворк Sencha и iPad-журналы. Как им это удается? Аппаратное ускорение спешит на помощь!

Есть замечательные CSS3-свойства transform и transition. Первое управляет преобразованием элемента, второе управляет CSS-анимацией. В частности, с помощью свойства transform можно сдвинуть элемент по оси X или Y, а с помощью transition можно этот сдвиг анимировать. Отличие от сдвига свойствами margin-left/margin-top и left/top в том, что сдвигаться будет не сам элемент, а его «графическое отображение» на странице. Таким образом получится избежать переотрисовки макета страницы при каждом сдвиге, а также снизить степень использования JavaScript.

К делу

Приведенные ниже примеры работают в Chrome, Safari, на iPhone и iPad.

Нужный нам параметр называется translate3d. И так получилось, что только он действительно на что-то влияет: по крайней мере, на прошивке 4.1 использование простого translate не приносило успеха. Итак, если при анимации обычными способами мы подключали jQuery и вызывали метод animate:

	$('#slide').click(function() {
		$(this).stop().animate({'margin-left': 650}, 1000);
	});
			

Кликните для запуска анимации:

Анимация на основе margin-left / left

То теперь нужно лишь выставить необходимое свойство в CSS, задать время и вид анимации:

	$('#slide').click(function() {
		$(this).css({
			'-webkit-transform': 'translate3d(650px, 0px, 0px)',
			'-webkit-transition': '-webkit-transform 1s linear'
		});
	});
			

Анимация на основе translate3d

Все остальное браузер сделает сам. Америку этот прием, конечно, не открывает, но зато все дрожания и подлагивания на iPhone как рукой сняло. Разве что осталось небольшое подмигивание при старте анимации, но и это поправимо. Нужно просто явно прописать указанные свойства в CSS с начальными значениями transform:

	#slide {
		-webkit-transform: translate3d(0px, 0px, 0px);
		-webkit-transition: -webkit-transform 1s linear;
	}
			

Анимация на основе translate3d с предустановкой в CSS

Не следует также злоупотреблять этими свойствами и выставлять их всем подряд элементам, особенно картинкам. Mobile Safari может просто рухнуть. А так, используя этот нехитрый метод, можно добиться идеальной работы вашего сайта на мобильных устройствах, поддерживающих аппаратное ускорение.

Инструментарий

Описанная в статье техника применяется на практике в слайдшоу Twilight и скроллере jBond.

Плагин jQuery Enhanced Animate позволяет на лету преобразовать анимацию некоторых свойств в вебкит-анимацию.

Андрей Маркелов