Алгоритм реализации кинетической прокрутки

Ответ 1

Недавно я реализовал его. Это шаги, которые я предпринял.

• Вам нужно измерить скорость вашего курсора (курсор мыши или палец)
• Реализовать простой цикл физики частиц. Информацию о том, как это сделать, можно найти здесь
• дайте вашим "границам" частицы, используя математику, полученную из ширины вашей плоскости прокрутки, и ширину вашего окна просмотра.
• Постоянно добавьте разницу между скоростью мыши и скоростью частицы до скорости частицы, поэтому скорость частицы "соответствует" скорости мыши до тех пор, пока она движется.
• Прекратите делать шаг 4, как только пользователь поднимет свой палец. Цикл физики заботится об инерции.
• Добавьте свои личные расцветки, такие как поля "бампер", и гладкие прокручивающие "якорные" точки, которые действуют на парадокс дзено для расчета движения.
• Я чуть не забыл: возьмите координаты, полученные сверху, и используйте его в качестве местоположения вашей прокручивающейся плоскости.

Скорее всего, скоро открою исходный код этого кода. Как скоро вам это нужно?

Изменить: изменил ссылку. Извините, указав на неверную страницу. edit2: или нет? Во всяком случае, исходная страница, с которой я связан, была первой ссылкой на связанную на данный момент страницу.

Ответ 2

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

Ответ 3

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

Поскольку это довольно сложная проблема, я решил разделить ее на несколько несколько независимых подзадач, как показано ниже:

• Основные функции прокрутки: эта задача состояла в том, чтобы обрабатывать события перетаскивания самым простым способом, прокручивая содержимое в соответствии с расстоянием и направлением перетаскивания. Это было относительно просто реализовать, единственный сложный аспект заключался в том, чтобы знать, когда начинать операцию перетаскивания, и когда передавать событие крана дочернему виджету внутри прокручиваемой области.

• Инерция прокрутки: эта была самой сложной задачей. Идея здесь заключается в том, что прокрутка должна продолжаться некоторое время после того, как пользователь поднимает палец, замедляя его, пока он полностью не остановится. Для этого мне нужно было иметь представление о скорости прокрутки. К сожалению, неточно вычислить скорость из одного образца, поэтому, пока пользователь прокручивает, я записываю последние события N движения в круговом буфере вместе со временем, в которое произошло каждое событие. Я обнаружил, что N = 4 отлично работает на iPhone и на сенсорной панели HP. Когда палец поднимается, я могу вычислить приблизительную начальную скорость для инерционной прокрутки из записанного движения. Я определил отрицательный коэффициент ускорения и использовал стандартные формулы движения (см. здесь), чтобы прокрутка сильно стиралась. Если положение прокрутки достигает границы, пока все еще в движении, я просто reset скорость до 0, чтобы предотвратить ее выход за пределы диапазона (крутой стоп-сигнал рассматривается далее).

• Гибкие пределы прокрутки: вместо того, чтобы идти в резкую остановку, когда прокрутка достигает конца, я хотел, чтобы виджет прокручивал некоторые, но предлагал сопротивление. Для этого я расширил допустимый диапазон прокрутки на обоих концах на величину, которую я определил как функцию размеров виджета. Я обнаружил, что добавление половины ширины или высоты на каждом конце хорошо работало. Трюк, позволяющий прокручивать ощущение, что он предлагает некоторое сопротивление, состоял в том, чтобы отрегулировать отображаемые позиции прокрутки, когда они находятся вне диапазона. Я использовал масштабирование и функцию замедления для этого (есть некоторые хорошие функции ослабления здесь).

• Spring поведение: теперь можно прокручивать действительный диапазон, мне нужен способ вернуть скроллер в допустимую позицию, если пользователь оставил его вне ассортимент. Это достигается путем корректировки смещения прокрутки, когда скроллер останавливается в положении вне диапазона. Функция регулировки, которую я нашел, чтобы дать приятный упругий вид, заключалась в том, чтобы разделить расстояние от текущей позиции до желаемой позиции на константу и сдвинуть смещение на эту величину. Чем больше константа, тем медленнее движение.

• Полоса прокрутки: последним прикосновением было добавление прокрутки полосы прокрутки, которые исчезают, когда прокрутка начинается и исчезает, когда она заканчивается.

Ответ 4

Вы посмотрели на функции Роберта Пеннера?

http://www.robertpenner.com/easing/

IIRC, они были первоначально для ActionScript и были в течение долгого времени.

Ответ 5

Ну, я думаю, что это будет что-то вроде a) получить скорость того, как быстро прокручивается пользователь b), когда он покидает свой палец, автоматически просматривает список, но с уменьшающейся скоростью с начальной скоростью того, что было у пользователя.