microsoft / microsoft/react-native-windows
Animated.diffClamp does not account for diff in NativeAnimated
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
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
- 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>
);
},
},
- Run the example
- 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).
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the NativeAnimatedModule implementation and use the RNTester Animated.diffClamp example from the reproduction steps. Compare the native result with the JS driver behavior, including the changing input value and clamp bounds. Done means NativeAnimated.diffClamp matches the JS driver's animation behavior, with the RNTester example demonstrating the fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, react-native
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100