Кир Белевич "touch it: универсальные тач-события и...
DESCRIPTION
Кир Белевич "Touch it: универсальные тач-события и слайдер" Я.Субботник в Санкт-Петербурге О докладе: Речь в докладе пойдет об универсальных для всех платформ тач-событиях и «слайдере» – интересном интерфейсном решении. В дополнение немного свежей статистики и размышлений о тенденциях.TRANSCRIPT
![Page 1: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/1.jpg)
Я.Субботник, Санкт-‐Петербург, 3 декабря 2011 года
Разработчик тач-‐интерфейсовКир Белевич
Touch it: универсальные тач-‐события и слайдер
![Page 2: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/2.jpg)
Универсальные тач-‐события
2
![Page 3: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/3.jpg)
Мышиные события
— mouseover
— mouseout
— mousemove
— mousedown
— mouseup
— click
— dblclick
3
![Page 4: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/4.jpg)
Тач-‐события
— touchstart
— touchmove
— touchend
— touchcancel
— iOS: gesturestart
— iOS: gesturechange
— iOS: gestureend
4
![Page 5: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/5.jpg)
5
![Page 6: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/6.jpg)
MSPointer-‐события
— MSPointerDown
— MSPointerMove
— MSPointerUp
— MSPointerOut
— MSGestureTap
— MSGestureDoubleTap
— MSGestureHold
6
MSPointer-‐события
![Page 7: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/7.jpg)
7
![Page 8: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/8.jpg)
— pointerdown
— pointermove
— pointerup
— pointercancel
— tap
8
Универсальные тач-‐события(touch || MSPointer || mouse)
![Page 9: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/9.jpg)
click:
— Задержка ~300 мс из-‐за ожидания double click
— неотзывчивый и «тормозящий» интерфейс
— прокликивания и конфликт touch и mouse событий
— click не файрится при изменениях в DOM
9
click VS tap
tap:
— отсутствие задержки == отзывчивость
— полный контроль, вплоть до разделения tap/жест
![Page 10: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/10.jpg)
— touchstart
— touchmove (?)
— touchend
— tap
— mouseover
— mousemove
— mousedown
— mouseup
— click
10
Последовательность событий
![Page 11: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/11.jpg)
Тач-‐слайдер
11
![Page 12: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/12.jpg)
12
![Page 13: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/13.jpg)
13
![Page 14: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/14.jpg)
14
![Page 15: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/15.jpg)
— реалтаймовый слайд «за пальцем» в iOS и Bada
— слайд «по факту» в Android
— слайд с помощью управляющих элементов-‐стрелочек для WP7
— разделение слайд/скролл на всё время жеста
— слайд более чем на один шаг при длинном жесте
— отпружинивающий предел, который нужно преодолеть для шага
— понятия скорости и ускорения
— боковые пределы и «тугость» слайда за ними
15
Возможности
![Page 16: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/16.jpg)
— отложенная инициализация до момента загрузки картинок внутри
— предотвращение «дырок» после поворота в пределах слайда
— задание непервого начального элемента
— разделение слайд/скролл на всё время жеста
— bem-‐события init, update, start и end
— подписка на len и right для управлением слайдером извне
— поэкранный слайдер
16
Возможности
![Page 17: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/17.jpg)
— если есть CSS3 3D Transforms , то "transform: translate3d(...)" для аппаратного ускорения и очень плавной анимации
— если нет, то обычный "transform: translateX()"
— pointer-‐события
— "pointer-‐events: none" во время анимации для предотвращения неожиданностей
— "float: len" + "white-‐space: nowrap" для растягивания слайдера без "posi�on: absolute" внутри "overflow: hidden"-‐блока
17
Внутри
![Page 18: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/18.jpg)
Внутри
slider.bind({ pointerdown: function(e) { // получение координат x1/y1 и времени t1 }, pointermove: function(e) { // расчёт смещений (x2 - x1, y2 - y1) // обычный скролл или реалтаймовый слайд }, pointerup: function() { // magic() на основании смещения и времени t2 }, pointercancel: function() { // сброс }});
18
![Page 19: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/19.jpg)
Внутри
function magic() { // вычисление скорости в px/ms // подбор ускорения в зависимости от скорости // подбор времени transition-анимации // расчёт новой позиции в зависимости от: // - направления слайда // - ускорения // - длины жеста (слайд более, чем на один шаг)
// проверка на левый и правый пределы // слайд в новую позицию (transition + translate)};
19
![Page 20: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/20.jpg)
iOS 4+, Bada
17
«Фэйды»
iOS <4, Android
WP7, некоторые Android
![Page 21: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/21.jpg)
Статистика за ноябрь 2011
20
![Page 22: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/22.jpg)
21
Статистика по платформам
![Page 23: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/23.jpg)
22
iOS -‐ 56.3%
![Page 24: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/24.jpg)
23
Android -‐ 37.43%
![Page 25: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/25.jpg)
24
Android -‐ 37.43%
![Page 26: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/26.jpg)
25
Bada -‐ 5.96%
![Page 27: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/27.jpg)
github.com/bem/bem-‐bl
26
clubs.ya.ru/ui
company.yandex.ru/public/subbotnik
![Page 28: Кир Белевич "Touch it: универсальные тач-события и слайдер"](https://reader034.vdocuments.pub/reader034/viewer/2022052412/557fbad9d8b42a40118b4b2e/html5/thumbnails/28.jpg)
Разработчик тач-‐интерфейсов
deepsweet@yandex-‐team.ru
@deepsweet
Кир Белевич