Animated.diffClamp does not account for diff in NativeAnimated

[rozele]

trafficstars

Problem Description

In the NativeAnimatedModule, Animated.diffClamp is implemented as a simple clamp on the value. This is not the intent of the Animated.diffClamp node. Animated.diffClamp should add the difference between the previous value and the current value to the current value and clamp that. NativeAnimated only clamps the current value.

Steps To Reproduce

1. Add a simple example to RNTester for Animated.diffClamp, e.g.:

  {
    title: 'Opacity with diffClamp',
    render: function (): React.Node {
      return (
        <Tester type="timing" config={{duration: 4000}}>
          {(anim) => (
            <Animated.View
              style={[
                styles.block,
                {
                  opacity: Animated.diffClamp(
                    anim.interpolate({
                      inputRange: [0, 0.5, 1],
                      outputRange: [0, 1, 0],
                    }),
                    0,
                    0.5,
                  ),
                },
              ]}
            />
          )}
        </Tester>
      );
    },
  },

2. Run the example
3. The diffClamp should add the diff to the current value, so you should see this animation run slightly faster than the configured 4 seconds (given the diff is added or subtracted from the value).
4. Since NativeAnimated only clamps the value, the animation starts animating opacity from 0.5 back to 0 at around the 75% mark, whereas the JS driver starts reducing the opacity much sooner.

Expected Results

The NativeAnimated behavior should match the JS driver behavior.

CLI version

npx react-native --version

Environment

npx react-native info

Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

Snack, code example, screenshot, or link to a repository

https://user-images.githubusercontent.com/1106239/145266370-ae33ecf6-0a67-4905-b837-9891d16a9974.mp4

[ghost]

Many of our core contributors are taking some much needed vacation throughout December 2021. Thank you for being patient while we relax, recharge, and return to a normal responsiveness in January 2022. In the meantime feel free to continue to pose questions, open issues, and make feature requests - you just may not get a response right away.

[chiaramooney]

In progress by Eric, awaiting review. Moving to 71 for tight timeline with large change.

[rozele]

Re-opening, as this is technically still a bug for the composition-based NativeAnimated implementation and the tick-based implementation is opt-in.

For a temporary workaround use:

// Animated.timing is an example, same syntax for any animation driver
Animated.timing({
  /* ... */,
  useNativeDriver: true,
  platformConfig: {
    useComposition: false,
  }
);

[chiaramooney]

Eric has fixed this when using a quirk setting. I believe there are no plans to fix this on Paper for the default animation code. Should this issue be moved to the backlog or closed?

[rozele]

For clarity - not so much a quirk setting, rather explicitly using the tick-driven animation driver for an animation using diffClamp'd value if it is causing problems in a Windows app... I.e.:

Animated.timing({
   ...
   useNativeDriver: true,
   platformConfig: {
     useComposition: false,
   }
 });

[chrisglein]

Fabric based implementation here is going to be largely identical to the Paper composition implementation, so we'll still need this fix in the new world. Need to keep the issue open. Will backlog until we look at Animated.diffClamp in our Fabric props inventory.