Algoritmo per implementare lo scorrimento cinetico

Question

Quali sono alcuni buoni algoritmi per la creazione di un'implementazione di scorrimento cinetico? La funzionalità verrebbe testata su un elenco UI personalizzato. Mentre sto prendendo di mira i dispositivi mobili (quelli che non hanno questa funzione integrata), può anche adattarsi a qualsiasi algoritmo o esempio di codice da un diverso campo di programmazione.

Answer 1

Ne ho implementato uno di recente. Questi sono i passi che ho preso.

1. Devi misurare la velocità del cursore (cursore del mouse o dito)
2. Implementa un semplice ciclo di fisica delle particelle. Informazioni su come farlo sono disponibili qui
3. indica la tua particella "limiti" usando la matematica derivata dalla larghezza del piano di scorrimento e dalla larghezza della finestra
4. aggiungi continuamente la differenza tra la velocità del mouse e la velocità della particella, alla velocità della particella, in modo che la velocità della particella "corrisponda" a " la velocità del mouse per tutto il tempo in cui si muove.
5. Interrompi il passaggio 4 non appena l'utente solleva il dito. Il ciclo della fisica si occupa dell'inerzia.
6. Aggiungi i tuoi dettagli personali come " bumper " margini e scorrimento uniforme "ancora". punti che operano sul paradosso di Zenone per il calcolo del movimento.
7. Quasi dimenticavo: prendi le coordinate derivate dall'alto e usale come posizione del tuo piano di scorrimento.

Probabilmente aprirò presto questo codice. Di quanto tempo hai bisogno?

modifica: modificato il collegamento. Siamo spiacenti, ho indicato leggermente la pagina sbagliata. edit2: o no? Ad ogni modo, la pagina originale a cui ho collegato era il primo link sulla pagina attualmente collegata.

Answer 2

Da quando questo è stato inizialmente richiesto, da allora ho letto attentamente il codice sorgente di pasticceria, il framework in cui apple ha esattamente duplicato il suo scorrimento cinetico in javascript. Non esiste un loop di fisica delle particelle: la velocità del tocco viene misurata nel momento esatto in cui il dito viene sollevato. Da quel punto in avanti, lo scorrimento viene animato usando una semplice funzione di andamento che utilizza la velocità come parametro di input.

Answer 3

Ho appena aggiunto un widget scroller al mio framework GUI mobile, quindi ho pensato di condividere la mia soluzione qui.

Poiché si tratta di un problema piuttosto complesso, ho deciso di dividerlo in sottoattività un po 'più indipendenti, come segue:

1. Funzionalità di scorrimento di base : questa attività consisteva nel gestire gli eventi di trascinamento nel modo più semplice, ovvero scorrendo il contenuto in base alla distanza e alla direzione del trascinamento. Questo era relativamente semplice da implementare, l'unico aspetto difficile era sapere quando iniziare un'operazione di trascinamento rispetto a quando passare un evento di tocco a un widget figlio all'interno dell'area scorrevole.

2. Inerzia di scorrimento : questa è stata la più impegnativa. L'idea qui è che lo scorrimento dovrebbe continuare per qualche tempo dopo che l'utente solleva il dito, rallentando fino a quando non si ferma completamente. Per questo avevo bisogno di avere un'idea della velocità di scorrimento. Sfortunatamente non è preciso calcolare la velocità da un singolo campione, quindi mentre l'utente sta scorrendo, registro gli ultimi N eventi di movimento in un buffer circolare, insieme al momento in cui si è verificato ciascun evento. Ho trovato N = 4 che funziona perfettamente su iPhone e HP TouchPad. Quando il dito viene sollevato, posso calcolare una velocità iniziale approssimativa per lo scorrimento inerziale dal movimento registrato. Ho definito un coefficiente di accelerazione negativo e usato formule di movimento standard (vedi qui ) per far morire lo scorrimento bene. Se la posizione di scorrimento raggiunge un bordo mentre è ancora in movimento, ripristino semplicemente la velocità su 0 per evitare che vada fuori dal raggio (la fermata improvvisa viene indirizzata successivamente).

3. Limiti di scorrimento flessibili : invece di fermarmi bruscamente quando lo scorrimento raggiunge la fine, volevo che il widget scorresse un po ', ma offrendo resistenza. Per questo ho esteso l'intervallo di scorrimento consentito su entrambe le estremità di un importo che ho definito in funzione delle dimensioni del widget. Ho scoperto che l'aggiunta della metà della larghezza o altezza su ciascuna estremità ha funzionato bene. Il trucco per dare allo scrolling la sensazione di offrire una certa resistenza era di regolare le posizioni di scorrimento visualizzate quando sono fuori portata. Ho usato un ridimensionamento più una funzione di decelerazione per questo (ci sono alcune buone funzioni di allentamento qui ).

4. Comportamento a molla : poiché ora è possibile scorrere oltre l'intervallo valido, avevo bisogno di un modo per riportare lo scroller in una posizione valida se l'utente lo ha lasciato fuori dall'intervallo. Ciò si ottiene regolando l'offset di scorrimento quando lo scroller si ferma in una posizione fuori portata. La funzione di regolazione che ho trovato per dare un bell'aspetto elastico era quella di dividere la distanza dalla posizione corrente alla posizione desiderata per una costante e spostando l'offset di tale importo. Maggiore è la costante, più lento sarà il movimento.

5. Barre di scorrimento : il tocco finale è stato quello di aggiungere barre di scorrimento sovrapposte, che si dissolvono quando inizia lo scorrimento e si dissolvono quando finisce.

Answer 4

Hai esaminato le funzioni di allentamento di Robert Penner?

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

IIRC erano originariamente per Actionscript e sono in circolazione da molto tempo.

Answer 5

Beh, penso che sarebbe qualcosa di simile a a) ottenere la velocità di scorrimento veloce dell'utente b) quando lascia il dito, scorrere automaticamente l'elenco ma con una velocità decrescente con una velocità iniziale di ciò che l'utente aveva.