React Native: continua l'animazione con l'ultima velocity del gesto di tocco

Question

Nella mia applicazione React Native ho alcune tessere (avvolte in un View per l'esempio) che sono metà della larghezza della larghezza totale. Agiscono come pulsanti e scorrono verso il lato opposto per aprire un menu. Quando eseguo un gesto di sfioramento e rilascio il dito prima che la diapositiva raggiunga la sua posizione finale, voglio che la diapositiva si animi alla sua posizione finale "aperta". L'animazione dovrebbe iniziare con l'ultima velocità del gesto di tocco per ottenere un'impressione senza intoppi.

Ho implementato diverse varianti ma non ho trovato una buona soluzione (È possibile trovare il mio test-component in my GitHub repository). Il mio View ha un PanResponder per gestire il gesto e ottenere la velocità. Ho iniziato a utilizzare la libreria Animated, ma i metodi forniti non risolvono il mio problema. L'unico metodo in cui posso passare una velocità iniziale per l'animazione è lo decay, ma non posso passare un parametro dove l'animazione dovrebbe fermarsi. Con un'animazione timing posso impostare un valore finale, ma non posso passare una velocità iniziale (quindi l'animazione inizia con una velocità di 0 che sembra molto nervosa). Ho provato a combinare questi due metodi, ma questo non funziona correttamente.

Su iOS, potrei utilizzare uno ScrollView orizzontale con pagingEnabled, che mostra l'effetto desiderato, ma non ho la funzionalità su Android.

Qualche idea su come posso risolvere questo problema e mostrare un'animazione fluida, che inizia con una velocità iniziale e termina in una data posizione, al termine dei gesti tattili?

Grazie per il vostro aiuto!

EDIT ho aggiunto il link al mio ultimo componente di prova ...

Answer 1

È possibile ottenere una buona approssimazione della velocità impostando il duration dell'animazione tempistica

const duration = Math.abs((this.props.MAXDISTANCE - Math.abs(distanceMoved))/velocity); 

• MAXDISTANCE è la tua posizione finale
• distanceMoved è la posizione corrente (gestureState.dx)
• velocity è la velocità attuale (gestureState.vx)

Answer 2

È possibile utilizzare Animated.decay o Animated.spring per ottenere questo effetto.