"Мы стали более лучше тач-скроллить"
Запись от fljot размещена 30.03.2012 в 22:22
Перевод моей небольшой вводной заметки c google+.
Ссылки для торопливых:
github: https://github.com/fljot/TouchScrolling
скомпилированные приложения-демки: https://github.com/fljot/TouchScrolling/downloads
Как пользоваться приложением: выбрать пример, двойной тап или хардварная кнопка меню (Android) для показа настроек, кнопка назад (Android) для возврата в главное меню выбора примеров, кнопка "back to demos" для возврата к текущему выбранному примеру. Примечание: приложение убивается при выходе-сворачивании.
Итак, наконец нашёл время и силы, подчистил код и выложил в опен-сорс. Тач (или назвать это кинетический?) скроллинг — неотъемлемая часть любой тачскриновой разработки будь то разработка под мобильные платформы, или под мультитач панели, или мультитач столы и стены. И, IMHO и к сожалению, я не нашёл никаких достойных решений под Flash платформу...
----------------------------------------
# Анализ
Так что же не так с теми решениями, которые вы можете загуглить по запросам "touch scrolling" или "kinetic scrolling" (+ "as3" или "flash")?
1. Ну во-первых, не особо получится их повторно использовать (всмысле в ситуации, отличающейся от найденного примера). Флексовый Spark Scroller смотрится (в техническом смысле) лучше остальных, но будучи частью Flex framework, он может быть использован только в купе со всей этой флексовой архитектурой, а значит вам придётся принять все их правила этой самой архитектуры. Другие люди же просто создают какой-то класс Scroller, который расширяет Sprite, куда и закидывают и скролл-логику, и контент.
2. Второй момент — это недостаток функционала (фич). Недостаточно просто поставить свой палец/курсор на экран и двигать вертикальный контент. Серьёзная разработка может потребовать такие вещи как мультитач, пагинацию контента и кастомные привязки(как это по-русски?? content paging and/or custom snapping), блокировку по направлению (directional locking), настройку физики/механики оттягивания, отскока и торможения (трения) (pull, bounce and throw deceleration) и т.д.
3. Третий момент самый важный для конечного пользователя — это ощущение от работы, что и формирует UX (user experience). Всё дело в правильной физике/механики, отзывчивости интерфейса (ну и производительности как части отзывчивости).
Важно отметить, что флексовый Spark Scroller выглядит (с технической точки зрения) и ощущается гораздо лучше прочих разработок. И не удивительно, ведь флекс-команде разработчиков нужно было сделать что-то приличное, раз уж они вступили в поле мобильной разработки.
----------------------------------------
# Моё решение
Короткий обзор того, как я решаю эти проблемы.
1. Очевидно, логику тач-скроллинга необходимо вынести за непосредственные пределы UI-компонент. Для этого я выбрал самый простой способ и работаю с интерфейсом IViewport (https://github.com/fljot/TouchScroll...e/IViewport.as) который имеет такие API как например horizontal/verticalScrollPosition и contentWidth/Height. Интерфейс почти такой же как и флексовый Spark IViewport, но я не хочу тащить кучу лишних зависимостей, так что приходится иметь свой, а не использовать флексовый. Сам класс, отвечающий за логику скроллинга это (невизуальный) класс-менеджер TouchScrollManager (https://github.com/fljot/TouchScroll...rollManager.as) и работает от с viewport'ом. Так что использовать его можно с компонентами любых UI-фреймворков (будь то флекс или minimalcomps или ваши личные UI-компоненты, ведь вы же, скорее всего, не будете использовать Flex framework для какой-нибудь мобильной игрули).
2. Я реализовал почти все фичи флексового скроллера + добавил новые.
У меня нету флексового snappingMode (LEADING_EDGE, CENTER, TRAILING_EDGE) т.к. это исходит из тесной флексовой архитектуры компонентов. Вместо этого у меня есть более гибкое, но и немного более сложное в использовании решение (snappingDelegate), которое позволяет сделать любую привязку (snapping).
Extra features: paging in BOTH directions, directionalLock (locks the scrolling to vertical or horizontal direction once you begin to move your finger - helps to avoid unnecessary movements in some cases), multitouch support (as it's based on PanGesture from my gesture recognition library Gestouch https://github.com/fljot/Gestouch), advanced control over bounce and pull effects and deceleration (friction).
3. Гладкий (мягкий?) UX более-менее достигнут (всё ещё хочу поиграться с throw effect easing using cubic Bezier curve) через грамотное использование п.2. /Говоря о флексе — у них были некоторые проблемы, на которые я указывал в давнишней 4.5 пре-релизной программе, но, видимо, у них не хватило ресурсов на исправления и доработки. к сожалению./
----------------------------------------
Итак, код открыт и доступен. Надеюсь на ваше участие в дальнейшей дискуссии и разработке.
Всего комментариев 34
Комментарии
31.03.2012 02:14 | |
Скролл превосходен. Но как его использовать в чистых AS3.0 AIR проектах без Flex framework (spark components)?
|
31.03.2012 02:18 | |
@FGump
Ну вот там непосредственно примеры — они как раз без флекса. Флекс в демке чисто для быстрого прототипирования оболочки для коллекций примеров и их настроек. |
31.03.2012 13:35 | |
класс на 2000 строк кода опасно...
|
31.03.2012 13:51 | |
Разве что рассчёт скорости планирую вынести. А анализ ввода (PanGesture) и бросок (ThrowEffect) уже вынесены.
|
05.04.2012 14:25 | |
Обнови TouchScrollingExample.ipa на github (File was not found). А то пока соберешь твой пример, замучаешься )
|
05.04.2012 14:44 | |
@toFL
надо же, гитхаб взглючил. Спасибо за наводку, перезалил. А какие вообще проблемы со сборкой? |
05.04.2012 18:29 | |
Цитата:
перезалил
Цитата:
А какие вообще проблемы со сборкой?
Попробую встроить в реальный проект ) |
24.07.2012 23:57 | |
Я так понимаю, в обычном Flash проекте это никак не получится использовать...
|
25.07.2012 20:30 | |
Почему?
|
06.12.2013 16:35 | |
да, жестяк... в ас3 чистом головняк, подключить не вышло
|
06.12.2013 19:43 | |
Фомкин портировал нa Haxe
https://github.com/yelbota/touch-scrolling |
06.12.2013 22:30 | |
Сначала портируют проекты на HaXe/JS, а потом заявляют о смерти флеша.
Logic Power |
08.12.2013 14:47 | |
MikroAcse - да это вплоне нормально. Развитие же языков происходит постоянно , порт с одного на другой и вот пошла лесенка, а в итоге будет песенка
|
08.12.2013 17:02 | |
Цитата:
похожий на жабу
Надеюсь такого не случится, тьфу-тьфу. |
08.12.2013 17:17 | |
Жаба - JAVA учи матчасть )
|
08.12.2013 18:39 | |
Цитата:
Жаба - JAVA учи матчасть )
|
08.12.2013 22:34 | |
Ну если сравгивать JS c JAVA - то очееень велика)))
|
09.12.2013 11:46 | |
Я на самом деле хотел у MikroAcse, чем JS так не угодил по сравнению с AS3
|
09.12.2013 18:53 | |
кш-кшш!..
|
10.12.2013 12:46 | |
Господа, статья изначально к JS не имеет никакого отношения. Тем более в том контексте, в котором вы пытаетесь его обсуждать. Хорош флудить .
|
08.04.2014 18:45 | |
Котяра,
я вынес лишние зависимости и получилась чисто физическая модель с коллбеками: https://github.com/fljot/TouchScroll...ScrollModel.as Недавно где-то встретил JavaScript фреймворчек, вроде как написанный самими Apple.. Так вот там анимация вроде попроще. Может я немного и того, съоверинжинирил в броске)) Но всё-равно даже как базовое — это хорошая работа, я считаю. Больше такого не встречал) |
08.04.2014 18:46 | |
Вон выше писал — Фомкин портанул на хакс. Один или два опечатанных бага нашёл, кстати.
|
Последние записи от fljot
- "Мы стали более лучше тач-скроллить" (30.03.2012)
- Touch Scrolling (09.12.2011)
- Gestouch — работаем с жестами. Mouse/touch/multitouch. (29.04.2011)