Change how velocity is calculated on the new web implementation #2443

j-piasecki · 2023-03-24T15:19:43Z

Description

Changes how pointer velocity is calculated on the web. Previously, it was using only the last two events which wasn't the best solution as the speed of the pointer just before it's released may not represent the speed of the swipe.

This changes it to be calculated using the same algorithm as Flutter.

Test plan

Use the Velocity test example added to the app

example/src/new_api/velocityTest/index.tsx

tomekzaw · 2023-04-24T15:51:06Z

src/web/tools/CircularBuffer.ts

+      if (index < 0) {
+        index += this.bufferSize;
+      }
+


Suggested change

idk, this is the only newline in all methods and it looks kinda redundant

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

## Summary In #4270 withDecay rubberBandFactor got fixed on the Web with a fix where velocity got multiplied by `1000` to overcome an issue present in RNGH. This got addressed in software-mansion/react-native-gesture-handler#2443 and released in Gesture Handler 2.10 thus making the fix unnecessary. ## Recordings ### Before with RNGH 2.10 https://github.com/software-mansion/react-native-reanimated/assets/39658211/3caf7961-3f0e-4a00-9889-18da33dbfd32 ### After with RNGH 2.10 https://github.com/software-mansion/react-native-reanimated/assets/39658211/2ca02d9f-bfd6-4e13-83c2-aaa6312e8e6a ## Test plan Run this snippet in WebExample <details open> <summary>Code example</summary> ```jsx import React from 'react'; import {StyleSheet, View} from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withDecay, } from 'react-native-reanimated'; import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; const SIZE = 120; export default function App() { const offset = useSharedValue(0); const width = useSharedValue(0); const onLayout = event => { width.value = event.nativeEvent.layout.width; }; const pan = Gesture.Pan() .onChange(event => { // highlight-next-line offset.value += event.changeX; }) .onFinalize(event => { // highlight-start offset.value = withDecay({ velocity: event.velocityX, rubberBandEffect: true, clamp: [-(width.value / 2) + SIZE / 2, width.value / 2 - SIZE / 2], }); // highlight-end }); const animatedStyles = useAnimatedStyle(() => ({ transform: [{translateX: offset.value}], })); return ( <GestureHandlerRootView style={styles.container}> <View onLayout={onLayout} style={styles.wrapper}> <GestureDetector gesture={pan}> <Animated.View style={[styles.box, animatedStyles]} /> </GestureDetector> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', height: '100%', }, wrapper: { flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center', }, box: { height: SIZE, width: SIZE, backgroundColor: '#b58df1', borderRadius: 20, cursor: 'grab', alignItems: 'center', justifyContent: 'center', }, }); ``` </details>

## Summary In software-mansion#4270 withDecay rubberBandFactor got fixed on the Web with a fix where velocity got multiplied by `1000` to overcome an issue present in RNGH. This got addressed in software-mansion/react-native-gesture-handler#2443 and released in Gesture Handler 2.10 thus making the fix unnecessary. ## Recordings ### Before with RNGH 2.10 https://github.com/software-mansion/react-native-reanimated/assets/39658211/3caf7961-3f0e-4a00-9889-18da33dbfd32 ### After with RNGH 2.10 https://github.com/software-mansion/react-native-reanimated/assets/39658211/2ca02d9f-bfd6-4e13-83c2-aaa6312e8e6a ## Test plan Run this snippet in WebExample <details open> <summary>Code example</summary> ```jsx import React from 'react'; import {StyleSheet, View} from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withDecay, } from 'react-native-reanimated'; import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler'; const SIZE = 120; export default function App() { const offset = useSharedValue(0); const width = useSharedValue(0); const onLayout = event => { width.value = event.nativeEvent.layout.width; }; const pan = Gesture.Pan() .onChange(event => { // highlight-next-line offset.value += event.changeX; }) .onFinalize(event => { // highlight-start offset.value = withDecay({ velocity: event.velocityX, rubberBandEffect: true, clamp: [-(width.value / 2) + SIZE / 2, width.value / 2 - SIZE / 2], }); // highlight-end }); const animatedStyles = useAnimatedStyle(() => ({ transform: [{translateX: offset.value}], })); return ( <GestureHandlerRootView style={styles.container}> <View onLayout={onLayout} style={styles.wrapper}> <GestureDetector gesture={pan}> <Animated.View style={[styles.box, animatedStyles]} /> </GestureDetector> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', height: '100%', }, wrapper: { flex: 1, width: '100%', alignItems: 'center', justifyContent: 'center', }, box: { height: SIZE, width: SIZE, backgroundColor: '#b58df1', borderRadius: 20, cursor: 'grab', alignItems: 'center', justifyContent: 'center', }, }); ``` </details>

j-piasecki added 4 commits March 24, 2023 16:14

Change how velocity is calculated on the web

5d58539

Add an example

bdf8fd7

Implement VelocityTracker from Flutter

fa12f89

Remove console.log

3c62a42

tomekzaw reviewed Apr 24, 2023

View reviewed changes

j-piasecki and others added 2 commits April 25, 2023 15:22

Handle null and don't cast

cc10f13

Update example/src/new_api/velocityTest/index.tsx

837e62e

Co-authored-by: Tomek Zawadzki <tomekzawadzki98@gmail.com>

tomekzaw approved these changes Apr 25, 2023

View reviewed changes

j-piasecki merged commit 8bbc597 into main Apr 25, 2023

j-piasecki deleted the @jpiasecki/fix-velocity-web branch April 25, 2023 15:54

kacperkapusciak mentioned this pull request May 16, 2023

Remove withDecay velocity fix on Web software-mansion/react-native-reanimated#4462

Merged

This was referenced Jun 19, 2024

Update dependency react-native-gesture-handler to v2 rodcordeiro/TokenBetweenApps#38

Open

Update dependency react-native-gesture-handler to v2 SeniorProject21DAN/herokuWebSockets#16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change how velocity is calculated on the new web implementation #2443

Change how velocity is calculated on the new web implementation #2443

j-piasecki commented Mar 24, 2023 •

edited

Loading

tomekzaw Apr 24, 2023

j-piasecki Apr 25, 2023

tomekzaw Apr 25, 2023

Change how velocity is calculated on the new web implementation #2443

Change how velocity is calculated on the new web implementation #2443

Conversation

j-piasecki commented Mar 24, 2023 • edited Loading

Description

Test plan

tomekzaw Apr 24, 2023

Choose a reason for hiding this comment

j-piasecki Apr 25, 2023

Choose a reason for hiding this comment

tomekzaw Apr 25, 2023

Choose a reason for hiding this comment

j-piasecki commented Mar 24, 2023 •

edited

Loading