Add new spring feature - clamp

__tests__/spring.test.tsx

@@ -0,0 +1,46 @@
+import {
+  SpringAnimation,
+  bisectRoot,
+  scaleZetaToMatchClamps,
+} from '../src/reanimated2/animation/springUtils';
+
+describe('Spring utils', () => {
+  test.each([
+    [[0, 5, (x) => x - 3, 20], 3],
+    [[0, 5, (x) => x * x - 9, 20], 3],
+    [[0, 5, (x) => x * x - 2, 20], Math.sqrt(2)],
+    [[0, 5, (x) => x - 1 / x - 1, 20], (1 + Math.sqrt(5)) / 2],
+  ] as const)('Bisect root', (testCase, result) => {
+    const [min, max, func, maxIterations] = testCase;
+    const calculatedOutput = bisectRoot({
+      min,
+      max,
+      func,
+      maxIterations,
+    });
+    expect(calculatedOutput).toBeCloseTo(result);
+  });
+
+  const animation = {
+    startValue: 0,
+    toValue: 10,
+    zeta: 0.5,
+  } as SpringAnimation;
+
+  test.each([
+    { min: -1, max: 10 },
+    { min: -100, max: 100 },
+    { min: -40, max: 50 },
+    { min: -0.005, max: 10.005 },
+  ] as const)('Test scaleZetaToMatchClamps', (clamp) => {
+    const zeta = scaleZetaToMatchClamps(animation, clamp);
+    const extremum1 = Math.exp(-zeta * Math.PI);
+    const extremum2 = Math.exp(-zeta * 2 * Math.PI);
+
+    expect(extremum1).toBeLessThan(clamp.max);
+    expect(extremum1).toBeGreaterThan(clamp.min);
+
+    expect(extremum2).toBeLessThan(clamp.max);
+    expect(extremum2).toBeGreaterThan(clamp.min);
+  });
+});

app/.eslintrc.js

@@ -10,5 +10,6 @@ module.exports = {
     'react-native/no-unused-styles': 'error',
     'react-native/no-raw-text': 'off', // This rule is great, we don't enable it because of its performance. If we ever find similar rule we should enable it.
     'react-native/no-single-element-style-arrays': 'error',
+    'react/jsx-fragments': ['error', 'syntax'],
   },
 };

app/src/examples/PendulumExample.tsx

@@ -166,20 +166,16 @@ export default function SpringExample() {
           </Animated.View>
         </View>
       </GestureDetector>
-      <React.Fragment>
-        {fields.map((item) => {
-          return (
-            <InputField
-              fieldName={item.fieldName}
-              value={item.value}
-              setValue={(value) => {
-                item.setValue(value);
-              }}
-              key={item.fieldName}
-            />
-          );
-        })}
-      </React.Fragment>
+      {fields.map((item) => {
+        return (
+          <InputField
+            fieldName={item.fieldName}
+            value={item.value}
+            setValue={item.setValue}
+            key={item.fieldName}
+          />
+        );
+      })}
     </GestureHandlerRootView>
   );
 }

app/src/examples/WithClampExample.tsx

@@ -3,7 +3,6 @@ import Animated, {
   useAnimatedStyle,
   withSpring,
   withClamp,
-  withDelay,
 } from 'react-native-reanimated';
 import { View, Text, Button, StyleSheet, ViewStyle } from 'react-native';
 import React, { useState } from 'react';
@@ -17,7 +16,16 @@ const CLAMP_MARKER_HEIGHT = 40;
 const LOWER_BOUND = 120;
 const UPPER_BOUND = 220;
 
-function renderExample(testedStyle: ViewStyle, description: string) {
+const LOWER_SPRING_TO_VALUE = 150;
+const UPPER_SPRING_TO_VALUE = 200;
+
+function Example({
+  testedStyle,
+  description,
+}: {
+  testedStyle: ViewStyle;
+  description: string;
+}) {
   return (
     <>
       <Text style={styles.text}>{description}</Text>
@@ -27,23 +35,47 @@ function renderExample(testedStyle: ViewStyle, description: string) {
           borderWidth: BORDER_WIDTH,
           borderColor: VIOLET,
         }}>
-        <Animated.View
-          style={[
-            styles.clampMarker,
-            { marginBottom: -CLAMP_MARKER_HEIGHT, width: UPPER_BOUND },
-          ]}
-        />
+        <View>
+          <View
+            style={[
+              styles.toValueMarker,
+              {
+                width: LOWER_SPRING_TO_VALUE,
+              },
+            ]}
+          />
+          <View
+            style={[
+              styles.clampMarker,
+              {
+                width: LOWER_BOUND,
+              },
+            ]}
+          />
+        </View>
         <Animated.View style={[styles.movingBox, testedStyle]} />
-        <Animated.View
-          style={[
-            styles.clampMarker,
-            {
-              marginTop: -CLAMP_MARKER_HEIGHT,
-              width: FRAME_WIDTH - LOWER_BOUND,
-              alignSelf: 'flex-end',
-            },
-          ]}
-        />
+        <View>
+          <View
+            style={[
+              styles.toValueMarker,
+              {
+                marginTop: -CLAMP_MARKER_HEIGHT / 2,
+                width: FRAME_WIDTH - UPPER_SPRING_TO_VALUE,
+                alignSelf: 'flex-end',
+              },
+            ]}
+          />
+          <View
+            style={[
+              styles.clampMarker,
+              {
+                marginTop: -100,
+                width: FRAME_WIDTH - UPPER_BOUND,
+                alignSelf: 'flex-end',
+              },
+            ]}
+          />
+        </View>
       </View>
     </>
   );
@@ -59,22 +91,24 @@ export default function AnimatedStyleUpdateExample() {
     dampingRatio: 0.075,
   };
 
-  const clampedStyle = useAnimatedStyle(() => {
+  const clampedStyleWithAnimationModifier = useAnimatedStyle(() => {
     return {
       width: withClamp(
         { min: LOWER_BOUND, max: UPPER_BOUND },
         withSpring(randomWidth.value, config)
       ),
     };
   });
-  const clampedStyleWithDelay = useAnimatedStyle(() => {
+
+  const clampedStyleWithConfig = useAnimatedStyle(() => {
     return {
-      width: withClamp(
-        { min: LOWER_BOUND, max: UPPER_BOUND },
-        withDelay(0, withSpring(randomWidth.value, config))
-      ),
+      width: withSpring(randomWidth.value, {
+        ...config,
+        clamp: { min: LOWER_BOUND, max: UPPER_BOUND },
+      }),
     };
   });
+
   const style = useAnimatedStyle(() => {
     return {
       width: withSpring(randomWidth.value, config),
@@ -96,9 +130,15 @@ export default function AnimatedStyleUpdateExample() {
 
   return (
     <View style={styles.container}>
-      {renderExample(clampedStyle, 'Clamped spring')}
-      {renderExample(clampedStyleWithDelay, 'Clamped spring with delay')}
-      {renderExample(style, 'Default spring')}
+      <Example
+        testedStyle={clampedStyleWithAnimationModifier}
+        description="Clamped spring with withClamp HOC"
+      />
+      <Example
+        testedStyle={clampedStyleWithConfig}
+        description="Clamped spring with clamp config property"
+      />
+      <Example testedStyle={style} description="Default spring" />
       <Animated.View
         style={[
           { margin: 50, width: 50, height: 50, backgroundColor: 'teal' },
@@ -108,7 +148,9 @@ export default function AnimatedStyleUpdateExample() {
       <Button
         title="toggle"
         onPress={() => {
-          randomWidth.value = toggle ? 150 : 200;
+          randomWidth.value = toggle
+            ? LOWER_SPRING_TO_VALUE
+            : UPPER_SPRING_TO_VALUE;
           rotation.value = toggle ? '380deg' : '-120deg';
           setToggle(!toggle);
         }}
@@ -123,13 +165,23 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     padding: CLAMP_MARKER_HEIGHT,
   },
+  toValueMarker: {
+    position: 'absolute',
+    margin: 0,
+    opacity: 1,
+    zIndex: 100,
+    height: CLAMP_MARKER_HEIGHT / 2,
+    backgroundColor: VIOLET,
+  },
   clampMarker: {
+    position: 'absolute',
     margin: 0,
     opacity: 0.5,
-    height: CLAMP_MARKER_HEIGHT,
+    height: 100,
     backgroundColor: VIOLET,
   },
   movingBox: {
+    zIndex: 1,
     height: 100,
     opacity: 0.5,
     backgroundColor: 'black',

src/reanimated2/animation/spring.ts

@@ -19,6 +19,7 @@ import {
   underDampedSpringCalculations,
   criticallyDampedSpringCalculations,
   isAnimationTerminatingCalculation,
+  scaleZetaToMatchClamps,
   checkIfConfigIsValid,
 } from './springUtils';
 
@@ -58,6 +59,7 @@ export const withSpring = ((
       duration: 2000,
       dampingRatio: 0.5,
       reduceMotion: undefined,
+      clamp: undefined,
     } as const;
 
     const config: DefaultSpringConfig & SpringConfigInner = {
@@ -210,6 +212,10 @@ export const withSpring = ((
         animation.zeta = zeta;
         animation.omega0 = omega0;
         animation.omega1 = omega1;
+
+        if (config.clamp !== undefined) {
+          animation.zeta = scaleZetaToMatchClamps(animation, config.clamp);
+        }
       }
 
       animation.lastTimestamp = previousAnimation?.lastTimestamp || now;