touch&it:&универсальные&тач7...
TRANSCRIPT
![Page 1: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/1.jpg)
Я.Субботник, Санкт-‐Петербург, 3 декабря 2011 года
Разработчик тач-‐интерфейсовКир Белевич
Touch it: универсальные тач-‐события и слайдер
![Page 2: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/2.jpg)
Универсальные тач-‐события
2
![Page 3: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/3.jpg)
Мышиные события
— mouseover
— mouseout
— mousemove
— mousedown
— mouseup
— click
— dblclick
3
![Page 4: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/4.jpg)
Тач-‐события
— touchstart
— touchmove
— touchend
— touchcancel
— iOS: gesturestart
— iOS: gesturechange
— iOS: gestureend
4
![Page 5: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/5.jpg)
5
![Page 6: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/6.jpg)
MSPointer-‐события
— MSPointerDown
— MSPointerMove
— MSPointerUp
— MSPointerOut
— MSGestureTap
— MSGestureDoubleTap
— MSGestureHold
6
MSPointer-‐события
![Page 7: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/7.jpg)
7
![Page 8: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/8.jpg)
— pointerdown
— pointermove
— pointerup
— pointercancel
— tap
8
Универсальные тач-‐события(touch || MSPointer || mouse)
![Page 9: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/9.jpg)
click:
— Задержка ~300 мс из-‐за ожидания double click
— неотзывчивый и «тормозящий» интерфейс
— прокликивания и конфликт touch и mouse событий
— click не файрится при изменениях в DOM
9
click VS tap
tap:
— отсутствие задержки == отзывчивость
— полный контроль, вплоть до разделения tap/жест
![Page 10: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/10.jpg)
— touchstart
— touchmove (?)
— touchend
— tap
— mouseover
— mousemove
— mousedown
— mouseup
— click
10
Последовательность событий
![Page 11: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/11.jpg)
Тач-‐слайдер
11
![Page 12: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/12.jpg)
12
![Page 13: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/13.jpg)
13
![Page 14: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/14.jpg)
14
![Page 15: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/15.jpg)
— реалтаймовый слайд «за пальцем» в iOS и Bada
— слайд «по факту» в Android
— слайд с помощью управляющих элементов-‐стрелочек для WP7
— разделение слайд/скролл на всё время жеста
— слайд более чем на один шаг при длинном жесте
— отпружинивающий предел, который нужно преодолеть для шага
— понятия скорости и ускорения
— боковые пределы и «тугость» слайда за ними
15
Возможности
![Page 16: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/16.jpg)
— отложенная инициализация до момента загрузки картинок внутри
— предотвращение «дырок» после поворота в пределах слайда
— задание непервого начального элемента
— разделение слайд/скролл на всё время жеста
— bem-‐события init, update, start и end
— подписка на len и right для управлением слайдером извне
— поэкранный слайдер
16
Возможности
![Page 17: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/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:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/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:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/19.jpg)
Внутри
function magic() { // вычисление скорости в px/ms // подбор ускорения в зависимости от скорости // подбор времени transition-анимации // расчёт новой позиции в зависимости от: // - направления слайда // - ускорения // - длины жеста (слайд более, чем на один шаг)
// проверка на левый и правый пределы // слайд в новую позицию (transition + translate)};
19
![Page 20: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/20.jpg)
iOS 4+, Bada
17
«Фэйды»
iOS <4, Android
WP7, некоторые Android
![Page 21: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/21.jpg)
Статистика за ноябрь 2011
20
![Page 22: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/22.jpg)
21
Статистика по платформам
![Page 23: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/23.jpg)
22
iOS -‐ 56.3%
![Page 24: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/24.jpg)
23
Android -‐ 37.43%
![Page 25: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/25.jpg)
24
Android -‐ 37.43%
![Page 26: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/26.jpg)
25
Bada -‐ 5.96%
![Page 27: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/27.jpg)
github.com/bem/bem-‐bl
26
clubs.ya.ru/ui
company.yandex.ru/public/subbotnik
![Page 28: Touch&it:&универсальные&тач7 событияи&слайдерcache-ash03.cdn.yandex.net/download.yandex.ru/company/... · 2011. 12. 1. · Я.Субботник,,Санкт.Петербург,,3,декабря,2011,года](https://reader034.vdocuments.net/reader034/viewer/2022051903/5ff431d5ec7fa759d521a977/html5/thumbnails/28.jpg)
Разработчик тач-‐интерфейсов
deepsweet@yandex-‐team.ru
@deepsweet
Кир Белевич