Всім відомо, наскільки популярний став мобільний браузінг. На сучасних пристроях веб все менше і менше поступається настільного оригіналу. Однак є один камінь спотикання: швидкість. Хоч на виході ми і отримуємо красиво намальовані веб-сторінку, продуктивність рендеринга і 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:

$ (). click (function () {$ (this) .stop () .animate ({: 650} 1000);});

Натисніть для запуску анімації:

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

То тепер потрібно лише виставити необхідне властивість в CSS, задати час і вид анімації:

$ (). click (function () {$ (this) .css ({:,:});});

Анімація на основі 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 дозволяє на льоту перетворити анімацію деяких властивостей в Вебком-анімацію.

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