Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > fljot

Оценить эту запись

"Мы стали более лучше тач-скроллить"

Запись от 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 FGump вне форума
FGump
Скролл превосходен. Но как его использовать в чистых AS3.0 AIR проектах без Flex framework (spark components)?
Старый 31.03.2012 02:18 fljot вне форума
fljot
@FGump

Ну вот там непосредственно примеры — они как раз без флекса. Флекс в демке чисто для быстрого прототипирования оболочки для коллекций примеров и их настроек.
Старый 31.03.2012 13:35 in4core вне форума
in4core
 
Аватар для in4core
класс на 2000 строк кода опасно...
Старый 31.03.2012 13:51 fljot вне форума
fljot
Разве что рассчёт скорости планирую вынести. А анализ ввода (PanGesture) и бросок (ThrowEffect) уже вынесены.
Старый 05.04.2012 14:25 toFL вне форума
toFL
Обнови TouchScrollingExample.ipa на github (File was not found). А то пока соберешь твой пример, замучаешься )
Старый 05.04.2012 14:44 fljot вне форума
fljot
@toFL

надо же, гитхаб взглючил. Спасибо за наводку, перезалил. А какие вообще проблемы со сборкой?
Старый 05.04.2012 18:29 toFL вне форума
toFL
Цитата:
перезалил
Спасибо.
Цитата:
А какие вообще проблемы со сборкой?
Уже ни каких, разобрался. Выглядит приятно.
Попробую встроить в реальный проект )
Старый 06.04.2012 18:46 fljot вне форума
fljot
Сделал 1 в 1 как на iOS, полностью идентичная динамика (скорость броска -> время, дистанция, характер торможения). Вплоть до тех же констант decelerationRate (UIScrollViewDecelerationRateNormal == 0.998 и UIScrollViewDecelerationRateFast == 0.990). Обновлённые демки на гитхабе.
Старый 24.07.2012 23:57 zerAlex2 вне форума
zerAlex2
Я так понимаю, в обычном Flash проекте это никак не получится использовать...
Старый 25.07.2012 20:30 fljot вне форума
fljot
Почему?
Старый 06.12.2013 16:35 3p.station вне форума
3p.station
 
Аватар для 3p.station
да, жестяк... в ас3 чистом головняк, подключить не вышло
Старый 06.12.2013 19:43 fljot вне форума
fljot
Фомкин портировал нa Haxe
https://github.com/yelbota/touch-scrolling
Старый 06.12.2013 22:30 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Сначала портируют проекты на HaXe/JS, а потом заявляют о смерти флеша.
Logic Power
Старый 08.12.2013 14:47 in4core вне форума
in4core
 
Аватар для in4core
MikroAcse - да это вплоне нормально. Развитие же языков происходит постоянно , порт с одного на другой и вот пошла лесенка, а в итоге будет песенка
Старый 08.12.2013 16:18 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Цитата:
да это вплоне нормально
Нормально, не нормально - это конечно все хорошо, но я хочу остаться на флеше, писать на actionscript.
Я вижу будущее этой платформы, но другие люди его затаптывают.
Может я лентяй, но мне нравиться то, что сейчас есть и я не хочу переучиваться.
Старый 08.12.2013 16:23 in4core вне форума
in4core
 
Аватар для in4core
MikroAcse - будущее, слово интересное. То, что AS будет жить - 100% , и будет жить долго, а может и всегда, и никакие порты этого не изменят, поменять могут только поколения. В любом случае , если выйдет AS4 - похожий на жабу , то все изменится очень сильно
Старый 08.12.2013 17:02 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Цитата:
похожий на жабу
Оу, только не это. JS - самый ужасный ужас, который я когда-либо видел.
Надеюсь такого не случится, тьфу-тьфу.
Старый 08.12.2013 17:17 in4core вне форума
in4core
 
Аватар для in4core
Жаба - JAVA учи матчасть )
Старый 08.12.2013 18:39 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Цитата:
Жаба - JAVA учи матчасть )
Моя ошибка слишком велика
Старый 08.12.2013 22:34 in4core вне форума
in4core
 
Аватар для in4core
Ну если сравгивать JS c JAVA - то очееень велика)))
Старый 08.12.2013 23:35 KumoKairo вне форума
KumoKairo
 
Аватар для KumoKairo
Мне больше интересно, что будет если сравнить JS с AS3? Чем JS настолько ужасней AS3, если и тот и другой язык по синтаксису сильно схожи?
Или я просто не с той стороны ваш комментарий прочитал?
Старый 09.12.2013 01:59 in4core вне форума
in4core
 
Аватар для in4core
KumoKairo - по синтаксису похожи ОЧЕНЬ много языков. Не буду вдаваться в подробности, но например разница создания переменной в JAVA и AS3
Код:
public var myClass:MyClass;
public MyClass myClass
Почти одно и тоже) слова местами поменяли. Только причем тут синтаксис? Это совершенно разный уровень. JS - не'типизированный язык этим он и ужасен. JS - веб язык и только. Я не ошибаюсь?! AS же еще и desktop
Старый 09.12.2013 06:55 elder_Nosferatu вне форума
elder_Nosferatu
 
Аватар для elder_Nosferatu
JS - не веб язык! Язык не бывает веб или десктоп. Все зависит от транслятора, который программы на этом языке обрабатывает. Так просто сложылось, что JS плотно сотрудничает с браузером но это не значит, что браузер - единственная среда выполнения для JS-программ. Есть даже реализации JS-интерпретатора для других языков, что позволяет его встроить в свое приложение и проганять через него свои JS-сценарии.
Старый 09.12.2013 10:43 Psycho Tiger вне форума
Psycho Tiger
 
Аватар для Psycho Tiger
Цитата:
JS - не'типизированный язык этим он и ужасен.
JS – динамический нетипизированный язык и в этом он прекрасен.
Цитата:
JS - веб язык и только. Я не ошибаюсь?!
Ошибаешься. Нода сейчас самый тренд.
Цитата:
В любом случае , если выйдет AS4 - похожий на жабу , то все изменится очень сильно
Так ты же сам сказал только что, что "синтаксис такой же, только слова местами поменяли". Так что для тебя, как для разработчика, изменится?
Старый 09.12.2013 11:46 KumoKairo вне форума
KumoKairo
 
Аватар для KumoKairo
Я на самом деле хотел у MikroAcse, чем JS так не угодил по сравнению с AS3
Старый 09.12.2013 13:58 carrotoff вне форума
carrotoff
 
Аватар для carrotoff
Цитата:
чем JS так не угодил по сравнению с AS3
У js сильный недостаток - невозможность хорошо структурировать проект. Отсутствие модульности.
Отсутствие нормального ООП. Мне не нравится реализация наследования через прототипирование.
Эту проблему в некоторой степени решают js-фреймворки, например ангулар или бэкбон.
Более лучше решают проблему языки, которые транслируются в js (например, typescript, CoffeeScript. может, кто-то пробовал Dart ?)

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

Но помимо недостатков, у js все-таки есть преимущества. В отличии от as3, там можно спокойно использовать замыкания (точнее это даже фишка js, на них все построено). А в as3 часто было бы удобней написать анонимку, но коли решишься на это - получишь печаль.
Старый 09.12.2013 18:20 Psycho Tiger вне форума
Psycho Tiger
 
Аватар для Psycho Tiger
Цитата:
У js сильный недостаток - невозможность хорошо структурировать проект.
Да вот как-то нет. Например, RequireJS или родной для ноды module.exports – вполне себе структурировано.
Цитата:
Отсутствие нормального ООП. Мне не нравится реализация наследования через прототипирование.
Ну так "не нравится" и "отсутствие" это разное. У JS'a куда больше возможностей к метапрограммированию чем у AS'a – наследование, классы и прочее решается через него, а не "штатными" средствами языка. Просто нету синтаксического сахара для определения таких конструкций. Я согласен с тем, что это не круто и что слава тайпу\дарту\кофи\лайву. Но оно нормальное, просто другое.
Старый 09.12.2013 18:53 fljot вне форума
fljot
кш-кшш!..
Старый 10.12.2013 11:21 carrotoff вне форума
carrotoff
 
Аватар для carrotoff
Цитата:
Да вот как-то нет. Например, RequireJS или родной для ноды module.exports – вполне себе структурировано.
Про нод жс ничего не скажу - опыта нет, а requirejs - хорошая штука, да. Я видел еще очень интересную реализацию сбора зависимостей с помощью JSDoc. То есть в начале "класса" пишется что-то типа:

Код AS1/AS2:
/**
* @require [список зависимостей]
*/
 
var User = function() {...}
Затем при сборке подтягиваются нужные данные, сжимаются. По-моему даже была статья на Хабре.
Цитата:
Ну так "не нравится" и "отсутствие" это разное.
Ну так я и не говорил об отсутствии в смысле невозможности. Я сказал, что классическое ООП средствами самого языка там отсутствует (это то, что ты назвал синтаксическим сахаром), а потребность в нем есть (не зря же оно есть в тайпе/кофи/дарте). И я не считаю, реализацию "таких конструкций" синтаксическим сахаром, я считаю это годами проверенным стандартом.

Я не являюсь противником js, пишу на нем достаточно много, вполне нормально. Здесь попросили написать недостатки js - я ответил, то, что могу отнести к субъективным (по-моему мнению) недостаткам.

Моя позиция укладывается в твою фразу
Цитата:
Я согласен с тем, что это не круто
Старый 10.12.2013 12:46 alexcon314 вне форума
alexcon314
Господа, статья изначально к JS не имеет никакого отношения. Тем более в том контексте, в котором вы пытаетесь его обсуждать. Хорош флудить .
Старый 08.04.2014 15:12 Котяра вне форума
Котяра
 
Аватар для Котяра
Попробовал использовать этот скроллер для чистого as3 проекта с последней версией gestouch
Как и ожидалось - куча ошибок.
требует спарка/флекса:
Код AS3:
	import spark.effects.animation.Keyframe;
	import spark.effects.animation.MotionPath;
	import spark.effects.easing.IEaser;
	import spark.effects.easing.Power;
Код AS3:
	import mx.events.PropertyChangeEvent;
	import mx.events.TouchInteractionEvent;
	import mx.events.TouchInteractionReason;
не совместим с последней версией gestouch
Код AS3:
	import org.gestouch.events.GestureStateEvent;
	import org.gestouch.events.PanGestureEvent;
Старый 08.04.2014 15:49 Котяра вне форума
Котяра
 
Аватар для Котяра
С флекс зависимостями разобрался (подтянул их в проект, что в общем-то не есть гуд)
Код AS3:
panGesture.addEventListener(PanGestureEvent.STATE_CHANGE, panGesture_stateChangeHandler);
заменил на
Код AS3:
panGesture.addEventListener(GestureEvent.GESTURE_STATE_CHANGE, panGesture_stateChangeHandle);
а что делать с
Код AS3:
panGesture.addEventListener(PanGestureEvent.GESTURE_PAN, panGesture_gesturePanHandler);
Старый 08.04.2014 18:45 fljot вне форума
fljot
Котяра,

я вынес лишние зависимости и получилась чисто физическая модель с коллбеками:
https://github.com/fljot/TouchScroll...ScrollModel.as

Недавно где-то встретил JavaScript фреймворчек, вроде как написанный самими Apple.. Так вот там анимация вроде попроще. Может я немного и того, съоверинжинирил в броске)) Но всё-равно даже как базовое — это хорошая работа, я считаю. Больше такого не встречал)
Старый 08.04.2014 18:46 fljot вне форума
fljot
Вон выше писал — Фомкин портанул на хакс. Один или два опечатанных бага нашёл, кстати.
 

 


Часовой пояс GMT +4, время: 21:51.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.