Плавная анимация на 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.

    Нужный нам параметр называется 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, который позволяет на лету преобразовать анимацию некоторых свойств в вебкит-анимацию. Работа плагина не идеальна, но он заслуживает внимания.
    Share post

    Similar posts

    Comments 27

      +4
      КСС :(
        0
        Ага, и Ява-скрипт.

        Откуда это берётся?
          –1
          Из индийского океана. А вот почему с большой буквы — не понятно.
            +1
            Меня больше удивляет откуда взялось слово «таблицы» в Cascading Style Sheets ;-) А в технических статьях следует писать по-английски, это я погорячился.
            0
            да, лучше уж КТС
              –2
              Просто и понятно. Кириллицей лучше не написать.
                +7
                ЦСС лучше
                  +1
                  Но всё-равно неправильно. Правильно — «СиЭсЭс». Так зачем делать замечание, если сами пишем неправильно?
              +3
              Что интересно, на андроиде (тоже ведь WebKit) страничка JQuery с анимациями не тормозит.
              А вот на вашем демо третий вариант (Animation based on translate3d with preset) действительно лучше остальных смотрится, может быть потому, что первые два варианта почему-то выделяются при клике, а третий — нет.
                0
                Как доберусь до андроида — обязательно его поковыряю. А как на нем вот эта галерея работает, не могли бы сказать? На айфоне жутко.
                  +1
                  Так себе работает, вместо плавной анимации видно около 5 кадров. Не уверен, считается ли это за «жутко» :-)
                    0
                    на N1 все нормально.
                    0
                    Может мы с вами разными андройдами пользуемся? У меня лично страница с jquery тормозит(htc wildfire, android 2.2.1, webkit 3.1) — не так сильно, что бы вызывало трудности при просмотре, но достаточно, что бы раздражать.
                    В первом тесте(Animation examples for iPhone/iPad) первый пример двигается рывками, второй выглядит приятно, третий идет также как в обычном браузере
                    Второй тест провален полностью. Картинки открываются с задержкой(анимация не отрисовывается вовсе)

                    Но работа проделана отличная.
                      0
                      HTC HD2, 2.2, root, wk 3.1 — летает.
                        0
                        Разными, у меня Desire — он побыстрее будет.
                      0
                      Что интересно, не тормозит она и на WP7. 5 кадров в секунду, иногда — больше, без «залипаний». А вот Ваши примеры не работают, видимо мобильный IE не достаточно html5.
                        +4
                        Мобильный IE не достаточно webkit. Да и HTML5 тоже. Это всё-таки IE7+, даже не IE8.
                          –1
                          Зато работает так быстро, что всё остальное ему можно простить. Пока страничка автора — первая встретившая мне, которую он отобразил некорректно.
                        0
                        я как раз разрабатываю анимацию сворачивания-разворачивания сложной страницы, перегруженной графикой, и должен сказать что обычный jquery slide тормозит не только на мобильниках, но иногда и на писюках, причем довольно мощных. в последних версиях браузеров (те что беты или еще не распространены) все конечно шикарно, но…
                        и пришли мои мысли к такому же решению, только вот пока руки не дошли попробовать
                        а есть ли что-то похожее для фф, даже в ксс3, его же держит частично и третья версия?
                          0
                          -moz-translateX и -moz-transition есть в FF4. В 3.6 нет transition, придется делать явой.
                            +1
                            Скажите, а как с помощью Java сделать то, что описано в топике?
                              0
                              тут отдельная статья нужна
                                0
                                «Чем отличается Java от JavaScript»?
                          0
                          translate3d использует аппаратное ускорение.

                          «We use webkit-transforms with translate3d because these animations will be hardware accelerated, and therefore significantly faster than changing the top value.»

                          code.google.com/intl/ru-RU/mobile/articles/webapp_fixed_ui.html
                            0
                            Пока вы тут на жквери куличики лепите, scripty2 уже достаточно давно во всех эффектах пытается как можно больше отрисовать при помощи css-анимации на браузерах, которые это умеют. Код там достаточно зрелый и вполне production-ready. Ну как минимум сильно более надежный пятиминутных наколенных поделок.

                            scripty2.com/
                              0
                              Спасибо большое за ссылку. Очень интересная библиотека, но, к сожалению, не вполне production-ready.
                              Сожалею, но:

                              В Chrome загрузка одного ядра процессора держится постоянно на 100%
                              В Opera какие-то проблемы с динамическими CSS-свойствами :(

                              Библиотека интересная и можно многое почерпнуть, но пока остаюсь со своими велосипедами весом всего 8KiB
                              0
                              спасибо!

                              Only users with full accounts can post comments. Log in, please.