Как в интерфейсе поступить при медленной анимации и частых действиях пользователя?

Question

[Сергей Соколов]

Большое количество колонок не вмещается в экран, сделана пошаговое листание с плавной анимацией (прототип).

Как лучше поступить с ситуацией, когда пользователь много и часто жмёт на кнопку и анимации не успевают доигрывать? Попробуйте в том фиддле часто понажимать на стрелку на клавиатуре.

Приходит в голову только «проглатывать» лишние нажатия в единицу времени, игнорируя их. Но, наверное, торопящегося пользователя это расстроит.

Answer 1

[Владимир Проскурин]

При скролле ставить в очередь позицию блока, и вычислять скорость анимации по длине очереди, чем выше, тем быстрее. Анимация должна идти к последнему элементу из очереди. Если нажать на противоположную кнопку, то анимация должна останавливаться на ближайшем следующем элементе, очередь очищаться, и начинаться анимация в противоположную сторону.
Анимацию придется делать на js, т.к. в transition нельзя плавно динамически изменять скорость анимации.

Comments

[Сергей Соколов]

Анимацию придется делать на js

Хотел этого избежать, но видимо, не получится.

[Сергей Соколов]

Может, при «желаемом превышении скорости» вообще отказаться от анимации и сразу ставить блоки на место? Т.е. не расчётно ускорять анимацию, как вы советуете, а сразу ускорить её до бесконечности ?

Когда пользователь листает изо всех сил, ему, наверное, уже не очень надо видеть плавные неторопливые движения элементов?

[Владимир Проскурин]

Сергей Соколов, это будет как-то резко, мне кажется. А может сделать без очереди, а просто как в обычном input[type=number], там если долго держать кнопку, скорость увеличения значения возрастает. т.е. просто реализовать ускорение с каждым кадром. Может как-то можно реализовать на transition-timing-function

[Владимир Проскурин]

Сергей Соколов, как-то так получилось
(код говно, но главное суть)
из-за ограничения кадров браузера в 60 FPS, при быстрой анимации некоторые блоки не успевают появится. Может если поиграться с коэффициентами, будет лучше.

[Сергей Соколов]

Спасибо за идею! Попробую и так и без анимации.

Answer 2

[AngReload]

По моему, достаточно сделать время анимации равным 100мс и debounce на 100мс.
https://jsfiddle.net/tz4pwfn1/39/
Иначе, если зажать кнопку, то прокрутка идёт чересчур быстро.

Comments

[Сергей Соколов]

при зажатой кнопке ожидаемое поведение, наверное, зависит от настроек автоповтора клавиатуры в системе. На каждый раз должно смещаться на 1. Логично?

[AngReload]

Сергей Соколов, сейчас проверил на чистой винде 10 — автоповтор срабатывает каждые 65 мс. Сомневаюсь что есть те, кто вручную могут с такой частотой клавиши нажимать.
При таких умолчаниях нужны разумные ограничения скорости.

Думаю, стоит ориентироваться на прокрутку в браузере кнопками, как только клавишу отпустил — всё, скролл прекратился. Это для колеса мыши то поведение, о котором вы говорите, там есть ускорения и прочее.