[Animated] Add AnimatedDiffClamp node

[janicduplessis]

Motivation

This adds a new type of node that clamps an animated value between 2 values with a special twist, it is based on the difference between the previous value so getting far from a bound doesn't matter and as soon as we start getting closer again the value will start changing. The main use case for this node is to create a collapsible navbar when scrolling a scrollview. This is a pretty in apps (fb, youtube, twitter, all use something like this).

It updates using the following: value = clamp(value + diff, min, max) where diff is the difference with the previous value.

This gives the following output for parameters min = 0, max = 30:

  in     out
  0      0
  15     15
  30     30
  100    30
  90     20
  30     0
  50     20

Potential issues

One issue I see is that this node is pretty specific to this use case but I can't see another simple way to do this with Animated that can also be offloaded to native easily. I'd be glad to discuss other solutions if someone comes up with another idea.

Test plan

Created a small example of a collapsible navbar in UIExplorer, will also add unit tests before shipping if we are happy with this approach.

Code: https://github.com/janicduplessis/react-native/blob/test-1/Examples/UIExplorer/js/CollapsibleNavbarExample.js

[janicduplessis]

cc @brentvatne @vjeux @astreet

[brentvatne]

@janicduplessis

iirc the scrollY becomes negative during bounce, so we could maybe do something like this (would require a new node type :P):

    const navbarTranslate = Animated.clamp(
      Animated.max(
        0, Animated.add(
           this.state.showAnim,
           Animated.multiply(this.state.scrollY, -1),
         ),
      ),
      -NAVBAR_MAX_TRANSLATE,
      0
    );

But then we might have the same problem when we hit the bottom of the ScrollView! So we'd need to add a Animated.min as well.. :P Also not sure what a good solution is there

[brentvatne]

Another thought -- maybe instead of just clamp we could call it anchoredClamp or movingClamp (like moving average) or diffClamp.

[janicduplessis]

Yeah we definitely need a new name I just had no inspiration :), I kind of like diffClamp.

As for bouncing it should be fixable by using interpolate with mode clamp to the scrollY animated value.

[brentvatne]

It would seem that nobody disagrees with this based off of lack of response ;P @janicduplessis - maybe just rename to diffClamp or whatever you prefer so we have a more specific name for it that doesn't get confused with extrapolate: 'clamp' and then we can

[ghost]

@janicduplessis updated the pull request - view changes

[janicduplessis]

@brentvatne renamed + added a small test.

[brentvatne]

@facebook-github-bot shipit

[ghost]

Thanks for importing.If you are an FB employee go to Phabricator to review internal test results.

[ghost]

@janicduplessis updated the pull request - view changes - changes since last import

[janicduplessis]

@brentvatne Oups there was a conflict, might need to reship.

[ghost]

I tried to merge this pull request into the Facebook internal repo but some checks failed. To unblock yourself please check the following: Does this pull request pass all open source tests on GitHub? If not please fix those. Does the code still apply cleanly on top of GitHub master? If not can please rebase. In all other cases this means some internal test failed, for example a part of a fb app won't work with this pull request. I've added the Import Failed label to this pull request so it is easy for someone at fb to find the pull request and check what failed. If you don't see anyone comment in a few days feel free to comment mentioning one of the core contributors to the project so they get a notification.

[brentvatne]

@facebook-github-bot shipit

[ghost]

Thanks for importing.If you are an FB employee go to Phabricator to review internal test results.