Skip to content

Commit 0a644d5

Browse files
committed
fix(Reanimated): withSpring overshoot clamping coordinates (#7959)
## Summary Fixes #7947 When fixing various thing in withSpring in #7803 I moved over to a coherent coordinate system for the animation. This means that when animating a value from 700 to 600, the animation internally animated from 100 to 0. For 600 to 700 it's -100 to 0. I accidentally didn't reflect that change for `overshootClamping` checks. ## Test plan ```tsx import React, { useEffect, useState } from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated'; export default function EmptyExample() { const [toggle, setToggle] = useState(false); const height = useSharedValue(600); const animatedStyle = useAnimatedStyle(() => { return { height: withSpring(height.value, { overshootClamping: true, }), }; }); return ( <View style={styles.container}> <Animated.View style={[{ width: 100, backgroundColor: 'blue' }, animatedStyle]} /> <Button title="Change Height" onPress={() => { const target = toggle ? 600 : 500; height.value = target; setToggle(!toggle); }} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ``` | Before | After | |--------|--------| | <video src="https://github.com/user-attachments/assets/75ac8595-90dd-44f1-ab04-5c5126941e1e"/> | <video src="https://github.com/user-attachments/assets/45c6f4e8-0291-42be-a268-8ee43ee72fb7"/> |
1 parent 01cd7e5 commit 0a644d5

File tree

1 file changed

+3
-4
lines changed

1 file changed

+3
-4
lines changed

packages/react-native-reanimated/src/animation/spring/springUtils.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -354,10 +354,9 @@ export function isAnimationTerminatingCalculation(
354354
const { toValue, velocity, startValue, current, initialEnergy } = animation;
355355

356356
if (config.overshootClamping) {
357-
if (
358-
(current > toValue && startValue < toValue) ||
359-
(current < toValue && startValue > toValue)
360-
) {
357+
const leftBound = startValue >= 0 ? toValue : toValue + startValue;
358+
const rightBound = leftBound + Math.abs(startValue);
359+
if (current < leftBound || current > rightBound) {
361360
return true;
362361
}
363362
}

0 commit comments

Comments
 (0)