Аппаратное ускорение CSS | bot.kz

Если вы разработчик мобильных веб — приложений, то вы наверняка уже не раз слышали о том, что родные программы работают лучше, чем сторонние приложения.

Но что значит «работать лучше»? В данном контексте под лучшей производительностью обычно подразумевают такие аспекты, как время загрузки и отзывчивость на действия пользователя. Но чаще всего, говоря о производительности, мы имеем в виду область анимации и переходов, а также насколько гладкими они являются.

Как мы можем получить более плавные переходы в приложениях

Мы склонны воспринимать переход как «гладкий» в том случае, когда число кадров в секунду (FPS), которое выводится на экран, превышает определенный когнитивный порог — около 30. И одна из характеристик родных приложений по сравнению с остальными состоит в том, что родные приложения способны сохранить высокий FPS, когда пользователь использует сенсорный экран, взаимодействуя с приложением при помощи своего пальца. Именно это было невозможно еще шесть лет назад.

Это возможно потому, что родные приложения могут получать доступ к графическим процессорам устройства (GPU). Сторонние веб – приложения работают в контексте мобильного браузера, который позволяет программному обеспечению делать многое (если не все), в результате чего на переходы затрачивается меньше усилий. Но разработчики быстро это поняли, и теперь большинство мобильных браузеров обеспечивают графическое аппаратное ускорение, в частности с помощью CSS.

Да, это является ключом к получению более плавного перехода на мобильных веб — приложениях. Но это устаревшая новость, скажите вы, и будете правы.

Для некоторых это и устаревшая новость, возможно, потому что она стала популярной и широко используется в разработке мобильных продуктов такой уважаемой компании, как Sencha. Но если вы работаете с CSS и JQuery, то знать, как вручную поднимать FPS полезно. Итак, давайте поработаем немного руками во имя науки и собственного интереса.

Время засучить рукава

Мы собираемся создать забавное слайд-шоу, которое…

Использует аппаратное ускорение;
Представляет пять слайдов полноэкранного размера;
Оно о котятах;
Оно удобно пролистывается;
Слайды плавно переходят от одного к другому;
Приложение отлично работает на стационарных компьютерах, мобильных телефонах и планшетных компьютерах;
Слайд-шоу отлично просматривается как в портретном, так и ландшафтном режиме;
Весь код не превышает пятидесяти строк.

Итак, давайте начнем.

Во-первых, мы создаем простую HTML страницу, которая содержит пять полноэкранных слайдов с котятами, которые мы сможем пролистывать. Котята любезно предоставленными placekitten. Страница будет состоять из одного #slides контейнера с пятью .slide элементами, каждый из которых имеет фоновое изображение, растянутое с помощью CSS, чтобы полностью покрыть слайд.

<!doctype html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
      <link href="style.css" type="text/css" rel="stylesheet" />
   </head>
   <body>
      <div id="slides">
         <div class="slide"></div>
         <div class="slide"></div>
         <div class="slide"></div>
         <div class="slide"></div>
         <div class="slide"></div>
      </div>
   </body>
</html>

Итак, это довольно просто. Мы используем известный viewport мета tag чтобы предотвратить масштабирование:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

Дополнение: Мы будем использовать -webkit- приставку в демо — файлах только ради сохранения короткого кода, и мы также будем придерживаться div элементов и забудем о масштабирование, иначе эта статья будет очень большой. В этой статье мы на ставили своей целью создать кросс — браузерный пример для всех мобильных устройств. Мы хотим только показать разницу, которую может привнести ускорение GPU на мобильных устройствах. В общем, мы должны использовать префиксы для всех браузеров (по крайней мере крупных), которые поддерживают эту функцию (или планируют сделать это в ближайшем будущем): -moz- -ms- -o-, и -webkit-.

style.css файл будет начинаться с следующего:

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: visible;
  background: #333;
}

#slides {
  width: 100%; height: 100%;
  white-space: nowrap;
  font-size: 0;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.slide {
  width: 100%; height: 100%;
  display: inline-block;
  background-size: cover;
}

.animate {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.slide:nth-child(1) { background: url(http://placekitten.com/640/480);}
.slide:nth-child(2) { background: url(http://placekitten.com/641/480);}
.slide:nth-child(3) { background: url(http://placekitten.com/642/480);}
.slide:nth-child(4) { background: url(http://placekitten.com/643/480);}
.slide:nth-child(5) { background: url(http://placekitten.com/644/480);}

Давайте посмотрим на #slides:

#slides {
  width: 100%; height: 100%;
  white-space: nowrap;
  font-size: 0;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

Наши #slides установлены на полный экран. Поскольку мы используем html DOCTYPE, нам необходимо сделать так, чтобы html и body элементы заняли до 100% от ширины и высоты. #slides контейнер требует, чтобы ни один из его .slide элементов не заключался в оболочку обертки, также важно чтобы шрифт размером 0 удалял любые промежутки между слайдами при горизонтальном положении экрана.

Слайды будут выровнены следующим образом:

Выравнивание изображения, используемые в наших demo.

Однако, только один слайд будет виден в полном объеме. Полупрозрачный красный прямоугольник ниже, представляет полный экран.

Только один слайд будет отображаться за раз.

Далее мы будем использовать аппаратное ускореный -webkit-transform: translate3d CSS переводит слайды в горизонтальную позицию.

Блог WebKit описывает translate3d, следующим образом:

Translate3d (х, у, x), translateZ (x) Перемещают элементы в х, у, и z, и просто элемент в z. Положительным z является по отношению к смотрящему. В отличие от х и у, значение z не может быть вычислен с процентами.

Интересно и то, что WebKit также предлагает простой 2D метод, который делает то же самое: translate (x, y). Но translate3d (x, y, z) использует GPU, и это то, что надо нам. На данный момент, мы установим его на (0,0,0):

transform: translate3d(0,0,0);

Следующая строка гарантирует, что фон слайда охватывает весь элемент, независимо от его ширины или высоты:

background-size: cover;

Сочетание наших viewport мета-тегов, которые устанавливают ширину страницы на device-width, и каждый слайд на 100% по ширине и высоте, делает возможной работу нашего приложения в полноэкранном режиме на стационарных компьютерах, планшетных компьютерах и мобильных телефонах, независимо от первоначальной ширины окна просмотра. Например, если вы открываете страницы на iPhone и прокрутите чуть-чуть налево, вы увидите, что следующий слайд уже входит на экране справа:

Скриншот нашего приложения на iPhone, прокрутите чуть-чуть налево, вы увидите, что следующий слайд уже входит на экране справа.

Даже не имеет значения, начинаете ли вы просматривать свое приложение в портретном или ландшафтном режиме (хотя сегодня мы не будем добавлять поддержку для адаптации к изменениям в ориентации приложения).

Для анимации слайдов, мы сделаем следующие:

.animate {
  transition: all .3s ease-out;
}

Это CSS3 transition, который говорит Webkit, оживить все его свойства, используя более легкий способ.

Мы используем CSS3 nth-child псевдо-класс, чтобы каждый слайд отображал каждого котенка в заданной ширине и высоте. Мы задавали различные размеры для того, чтобы получить различные изображения, потому что на сайте placekitten все изображения имеют различные параметры.

.slide:nth-child(1) { background: url(http://placekitten.com/640/480);}
.slide:nth-child(2) { background: url(http://placekitten.com/641/480);}
.slide:nth-child(3) { background: url(http://placekitten.com/642/480);}
.slide:nth-child(4) { background: url(http://placekitten.com/643/480);}
.slide:nth-child(5) { background: url(http://placekitten.com/644/480);}

Давайте откроем готовую часть в Chrome или Safari. Вот что вы должны увидеть:

Наше веб — приложение без кода.

Все правильно. Мы видим только одного котенка на весь экран и большую горизонтальную полосу прокрутки, которая предоставляет доступ к другим четырем слайдам. Пока еще тут нет анимации и других необходимых функций.

Добавляем эффекты

Наш подход в считывание каждого слайда использован для того, что бы пользователь мог удерживать каждый слайд в поле зрения используя жесты. Когда пользователь перестает движение, мы делаем так, что браузер демонстрирует следующий или предыдущий слайд с помощью перехода CSS. Вы можете добавить и другие настройки и инструменты к основным настройкам.

Сначала мы должны изменить overflow: visible на overflow: hidden в body элементе CSS, чтобы избавиться от функции прокрутки по умолчанию.

body {
  margin: 0;
  overflow: hidden;
  background: #333;
}

Затем мы включаем jQuery и наши собственные script.js файлы Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Мобильные приложения → 21.06.2012 by Newsbot