Всем известно, насколько популярен стал мобильный браузинг. На современных устройствах веб все меньше и меньше уступает настольному оригиналу. Однако есть один камень преткновения: скорость. Хоть на выходе мы и получаем красиво отрисованную веб-страницу, производительность рендеринга и 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.
Нужный нам параметр называется translate3d. И так получилось, что только он действительно на что-то влияет: по крайней мере, на прошивке 4.1 использование простого translateX не приносило успеха. Итак, если при анимации обычными способами мы подключали jQuery и вызывали метод animate:
То теперь нужно лишь выставить необходимое свойство в CSS, задать время и вид анимации:
Все остальное браузер сделает сам. Америку этот прием, конечно, не открывает, но зато все дрожания и подлагивания на iPhone как рукой сняло. Разве что осталось небольшое подмигивание при старте анимации, но и это поправимо. Нужно просто явно прописать указанные свойства в CSS с начальными значениями transform:
Не следует также злоупотреблять этими свойствами и выставлять их всем подряд элементам и, особенно, картинкам. Mobile Safari может просто рухнуть. А так, используя этот нехитрый метод, можно добиться идеальной работы вашего сайта на мобильных устройствах, поддерживающих аппаратное ускорение.
Страничка с демо
Архив с демо
Я написал два плагина, использующих этот метод: слайдер с тач-контролом и слайдшоу. Слайдер практически готов, слайдшоу нужно допилить, но пользоваться можно. Документацию и страницу с описанием сделать пока не успел. Думаю, кому-то пригодится для разработок.
Демо слайдера и слайдшоу
Архив с ними
Можно вызвать слайдер с параметром mobileMode: 'touchMargin' и посмотреть, как бы это выглядело, используй я свойство left.
Кроме того, следует упомянуть интересный плагин jQuery Enhanced Animate, который позволяет на лету преобразовать анимацию некоторых свойств в вебкит-анимацию. Работа плагина не идеальна, но он заслуживает внимания.
Особенно это заметно на всевозможных слайдшоу: на мобильных и планшетах они тормозят, глючат, мерцают и всячески портят впечатления. Сегодня мы заставим анимацию работать идеально на iPhone и iPad.
Чтобы понять о чем идет речь, достаточно открыть в Mobile Safari любую страницу с анимацией, да вот хотя бы домашнюю страница jquery.cycle. На компьютере все плавно и замечательно, а на iPhone — тормозящий мрак. На реальных слайдерах с большими фотографиями ситуация еще хуже.
Можно было бы подумать, что маленькому девайсу не под силу выжать больше, однако это не так. Умудряются же работать без тормозов некоторые интерфейсы, в частности фреймворк Sencha и iPad-журналы. Как им это удается? Аппаратное ускорение спешит на помощь!
Есть замечательные CSS3-свойства transform и transition. Первое управляет преобразованием элемента, второе управляет CSS-анимацией. В частности, с помощью свойства transform можно сдвинуть элемент по оси X или Y, а с помощью transition можно этот сдвиг анимировать. Отличие от сдвига свойствами margin-left/margin-top и left/top в том, что сдвигаться будет не сам элемент, а его «графическое отображение» на странице. Таким образом получится избежать переотрисовки макета страницы при каждом сдвиге, а также снизить степень использования JavaScript.
Нужный нам параметр называется translate3d. И так получилось, что только он действительно на что-то влияет: по крайней мере, на прошивке 4.1 использование простого translateX не приносило успеха. Итак, если при анимации обычными способами мы подключали jQuery и вызывали метод animate:
$('#slide').click(function() {
$(this).stop().animate({'margin-left': 650}, 1000);
});То теперь нужно лишь выставить необходимое свойство в CSS, задать время и вид анимации:
$('#slide').click(function() {
$(this).css({
'-webkit-transform': 'translate3d(650px, 0px, 0px)',
'-webkit-transition': '-webkit-transform 1s linear',
});
});Все остальное браузер сделает сам. Америку этот прием, конечно, не открывает, но зато все дрожания и подлагивания на iPhone как рукой сняло. Разве что осталось небольшое подмигивание при старте анимации, но и это поправимо. Нужно просто явно прописать указанные свойства в CSS с начальными значениями transform:
#slide {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-transition: -webkit-transform 1s linear;
}Не следует также злоупотреблять этими свойствами и выставлять их всем подряд элементам и, особенно, картинкам. Mobile Safari может просто рухнуть. А так, используя этот нехитрый метод, можно добиться идеальной работы вашего сайта на мобильных устройствах, поддерживающих аппаратное ускорение.
Страничка с демо
Архив с демо
Я написал два плагина, использующих этот метод: слайдер с тач-контролом и слайдшоу. Слайдер практически готов, слайдшоу нужно допилить, но пользоваться можно. Документацию и страницу с описанием сделать пока не успел. Думаю, кому-то пригодится для разработок.
Демо слайдера и слайдшоу
Архив с ними
Можно вызвать слайдер с параметром mobileMode: 'touchMargin' и посмотреть, как бы это выглядело, используй я свойство left.
Кроме того, следует упомянуть интересный плагин jQuery Enhanced Animate, который позволяет на лету преобразовать анимацию некоторых свойств в вебкит-анимацию. Работа плагина не идеальна, но он заслуживает внимания.
