[Animated] Add AnimatedDiffClamp node #9419

Closed
wants to merge 2 commits into
from

Conversation

Projects
None yet
3 participants
@janicduplessis
Collaborator

janicduplessis commented Aug 16, 2016

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

navbar

@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 16, 2016

Collaborator

@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

Collaborator

brentvatne commented Aug 16, 2016

@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

@ghost ghost added the CLA Signed label Aug 16, 2016

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 17, 2016

Collaborator

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

Collaborator

brentvatne commented Aug 17, 2016

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

@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Aug 17, 2016

Collaborator

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.

Collaborator

janicduplessis commented Aug 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Aug 20, 2016

Collaborator

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 :shipit:

Collaborator

brentvatne commented Aug 20, 2016

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 :shipit:

@ghost ghost added the CLA Signed label Aug 20, 2016

@janicduplessis janicduplessis changed the title from [Animated] Add AnimatedClamp node to [Animated] Add AnimatedDiffClamp node Aug 21, 2016

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 21, 2016

@janicduplessis updated the pull request - view changes

ghost commented Aug 21, 2016

@janicduplessis updated the pull request - view changes

@ghost ghost added the CLA Signed label Aug 21, 2016

@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Aug 21, 2016

Collaborator

@brentvatne renamed + added a small test. :shipit: :shipit:

Collaborator

janicduplessis commented Aug 21, 2016

@brentvatne renamed + added a small test. :shipit: :shipit:

@brentvatne

This comment has been minimized.

Show comment
Hide comment
Collaborator

brentvatne commented Aug 22, 2016

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 22, 2016

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

ghost commented Aug 22, 2016

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

@ghost ghost added the CLA Signed label Aug 22, 2016

@ghost

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

This comment has been minimized.

Show comment
Hide comment
@janicduplessis

janicduplessis Aug 22, 2016

Collaborator

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

Collaborator

janicduplessis commented Aug 22, 2016

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

@ghost ghost added Import Failed and removed Import Started labels Aug 23, 2016

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 23, 2016

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.

ghost commented Aug 23, 2016

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.

@ghost ghost added the CLA Signed label Aug 23, 2016

@brentvatne

This comment has been minimized.

Show comment
Hide comment
Collaborator

brentvatne commented Aug 23, 2016

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Aug 23, 2016

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

ghost commented Aug 23, 2016

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

@ghost ghost added the CLA Signed label Aug 23, 2016

@ghost ghost closed this in cd1d652 Aug 23, 2016

ghost pushed a commit that referenced this pull request Sep 6, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes #9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add AnimatedDiffClamp node
Summary:
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
```

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 some
Closes facebook#9419

Differential Revision: D3753920

fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes facebook#9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add AnimatedDiffClamp node
Summary:
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
```

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 some
Closes facebook#9419

Differential Revision: D3753920

fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes facebook#9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add AnimatedDiffClamp node
Summary:
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
```

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 some
Closes facebook#9419

Differential Revision: D3753920

fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a

ide added a commit to expo/react-native that referenced this pull request Sep 7, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes facebook#9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

kipricker added a commit to PlexChat/react-native that referenced this pull request Sep 17, 2016

Add AnimatedDiffClamp node
Summary:
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
```

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 some
Closes facebook#9419

Differential Revision: D3753920

fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a

kipricker added a commit to PlexChat/react-native that referenced this pull request Sep 17, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes facebook#9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

ide added a commit to expo/react-native that referenced this pull request Oct 27, 2016

Add AnimatedDiffClamp node
Summary:
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
```

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 some
Closes facebook#9419

Differential Revision: D3753920

fbshipit-source-id: 40a749d38fd003aab2d3cb5cb8f0535e467d8a2a

ide added a commit to expo/react-native that referenced this pull request Oct 27, 2016

Add support for DiffClamp node
Summary:
Add native support on iOS and Android for `Animated.diffClamp` that was added in #9419.

**Test plan**
Tested that it works properly using the native animations UIExplorer example.
Closes facebook#9691

Differential Revision: D3813440

fbshipit-source-id: 48a3ecddf3708fa44b408954d3d8133ec8537f21

rozele added a commit to rozele/react-native-windows that referenced this pull request Oct 28, 2016

feat(Animated): Adds support for DiffClamp node
Add support for DiffClamp node on Windows for `Animated.diffClamp` that was added in facebook/react-native#9419.

rozele added a commit to rozele/react-native-windows that referenced this pull request Oct 28, 2016

feat(Animated): Adds support for DiffClamp node
Add support for DiffClamp node on Windows for `Animated.diffClamp` that was added in facebook/react-native#9419.

rozele added a commit to Microsoft/react-native-windows that referenced this pull request Oct 28, 2016

feat(Animated): Adds support for DiffClamp node
Add support for DiffClamp node on Windows for `Animated.diffClamp` that was added in facebook/react-native#9419.

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment