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

Question

Какие есть хорошие алгоритмы для создания кинетической реализации с прокруткой? Эта функция будет протестирована в списке пользовательских интерфейсов. Хотя я нацеливаюсь на мобильные устройства (те, которые не имеют этой встроенной функции), может подойти любой алгоритм или пример кода из другой области программирования.

Answer 1

Я недавно внедрил один сам. Вот шаги, которые я предпринял.

<Ол>

Вам нужно измерить скорость вашего курсора (либо курсора мыши, либо пальца)

Реализуйте простой цикл физики элементарных частиц. Информацию о том, как это сделать, можно найти здесь

дайте вашей частице "границы" используя математику, полученную из ширины плоскости прокрутки и ширины области просмотра

непрерывно Добавляйте разницу между скоростью мыши и скоростью частицы к скорости частицы, чтобы скорость частицы "соответствовала" скорость мыши, пока она движется.

Прекратите выполнение шага 4, как только пользователь поднимает палец. Физический цикл заботится об инерции.

Добавьте свои личные достижения, такие как " бампер " поля и плавная прокрутка "якорь" точки, которые оперируют парадоксом Зенона при расчете движения.

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

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

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

Answer 2

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

Answer 3

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

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

<Ол>

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

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

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

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

Полосы прокрутки : последний штрих - добавить накладные полосы прокрутки, которые исчезают, когда начинается прокрутка, и исчезают, когда она заканчивается.

Answer 4

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

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

IIRC изначально были для Actionscript и существуют уже давно.

Answer 5

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