Added support for using animated values as the target of an interpolation.

[DylanVann]

Motivation

More complex animations can be created by combining an interpolation with an animated outputRange.

An example of basic usage is shown here: https://twitter.com/atomarranger/status/965802252597387264

Test Plan

An example is added to RNTester to demonstrate the usage of this feature with and without useNativeDriver.

Release Notes

[GENERAL] [FEATURE] [Native Animated] - Added support for using animated values as the target of an interpolation.

[pull-bot]

	Warnings
⚠️	❗ Big PR - This PR is extremely unlikely to get reviewed because it touches 613 lines.

Generated by 🚫 dangerJS

[Freddy03h]

It can be cool to also have it for inputRange !

[DylanVann]

@Freddy03h Yeah that could be cool, it would introduce some weird cases though. Currently inputRange is required to be monotonically increasing.

My use case for animating outputRange is to animate the ending position of a gesture based animation. The animated value I'm interpolating is being set by react-native-interactable.

I think it would make sense to address animating inputRange in another PR.

[janicduplessis]

Hey thanks for working on this. Just so I understand better do you have a concrete use case where this feature is needed to accomplish a certain behaviour? Could the animation in your example be accomplished with Animated.tracking instead?

[DylanVann]

@janicduplessis Thanks for checking it out. The concrete use case I have involves using react-native-interactable.

On this screen the card animation is driven by react-native-interactable which also updates an AnimatedValue. That AnimatedValue is interpolated to determine the size and position of the profile picture. The size and position of the profile picture also changes based on wether the user is viewing the leaderboard or the profile. So then the desired effect is to be able to animate the ending value of the interpolation.

I'm not a big fan of how I did the implementation of this. Let me know what you think about the proposed breaking change because I think that would make it a lot cleaner.

I can also fix up the tests for this if you think this feature is worth adding.

[DylanVann]

I've updated #18030 so it's only a deprecation, and all tests pass.

I think that change should be made before continuing with this feature.

[facebook-github-bot]

@DylanVann I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

[facebook-github-bot]

@DylanVann I tried to find reviewers for this pull request and wanted to ping them to take another look. However, based on the blame information for the files in this pull request I couldn't find any reviewers. This sometimes happens when the files in the pull request are new or don't exist on master anymore. Is this pull request still relevant? If yes could you please rebase? In case you know who has context on this code feel free to mention them in a comment (one person is fine). Thanks for reading and hope you will continue contributing to the project.

[DylanVann]

Closing in light of react-native-reanimated being created, also future changes to React Native's architecture may make it no longer necessary.