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

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

Производительность JavaScript

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

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

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

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

К делу

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

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

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

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

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

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

$('#slide').click(function() {
	$(this).css({
		'-webkit-transform': 'translate3d(650px, 0px, 0px)',
		'-webkit-transition': '-webkit-transform 1s linear'
	});
});
		
Анимация на основе translate3d

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

#slide {
	-webkit-transform: translate3d(0px, 0px, 0px);
	-webkit-transition: -webkit-transform 1s linear;
}
		
Анимация на основе translate3d с предустановкой в CSS

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

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

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

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

Существует отдельная страница с демками для разбора.

Февраль 2011
Андрей Маркелов
Библиотека