React Native: Tiếp tục hoạt ảnh với vận tốc chạm cử chỉ cuối cùng

Question

Trong ứng dụng React Native của tôi, tôi có một số ô xếp (được bọc trong một ví dụ View) có kích thước bằng một nửa chiều rộng toàn bộ. Chúng hoạt động như các nút và trượt sang phía đối diện để mở menu. Khi tôi thực hiện thao tác vuốt và nhả ngón tay trước khi trang trình bày đạt đến vị trí cuối cùng của nó, tôi muốn trang trình bày chuyển động sang vị trí 'đã mở' cuối cùng của nó. Hoạt ảnh sẽ bắt đầu với vận tốc cuối cùng của cử chỉ cảm ứng cho một ấn tượng suôn sẻ.

Tôi đã triển khai các biến thể khác nhau nhưng không tìm thấy giải pháp tốt (Bạn có thể tìm thấy test-component in my GitHub repository). My View có PanResponder để quản lý cử chỉ và để có được vận tốc. Tôi bắt đầu sử dụng thư viện Animated, nhưng các phương pháp được cung cấp không giải quyết được vấn đề của tôi. Phương pháp duy nhất mà tôi có thể vượt qua vận tốc ban đầu cho hoạt ảnh là decay, nhưng tôi không thể chuyển một tham số trong đó hoạt ảnh sẽ dừng lại. Với hoạt ảnh timing, tôi có thể đặt giá trị cuối cùng nhưng không thể vượt qua vận tốc ban đầu (do đó hoạt ảnh bắt đầu với vận tốc 0 trông rất nhanh). Tôi đã cố gắng kết hợp hai phương pháp này, nhưng nó không hoạt động đúng cách.

Trên iOS tôi có thể sử dụng ngang ScrollView với pagingEnabled, hiển thị hiệu ứng mong muốn - nhưng sau đó tôi không có tính năng trên Android.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này và hiển thị hình động mượt mà, bắt đầu với vận tốc ban đầu và kết thúc ở vị trí nhất định sau khi các cử chỉ cảm ứng kết thúc?

Cảm ơn sự giúp đỡ của bạn!

EDIT tôi đã thêm các liên kết đến phần kiểm tra cuối cùng của tôi ...

Answer 1

Bạn có thể lấy một xấp xỉ gần vận tốc bằng cách thiết lập duration của ảnh động thời gian

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

• MAXDISTANCE là vị trí cuối cùng của bạn
• distanceMoved là vị trí hiện tại (gestureState.dx)
• velocity là vận tốc hiện tại (gestureState.vx)

Answer 2

Bạn có thể sử dụng Animated.decay hoặc Animated.spring để đạt được hiệu ứng này.