Open kz-publisher opened 1 month ago
Thanks for the detailed bug report. There are definitely some unresolved issues with the native animation diver. We're in the middle of the lift from the Paper renderer to the Fabric renderer, but as that Fabric is based on composition a lot of this carries over intact (including its bugs). So we'll need to do a proper review of the native animation driving.
Glad you have a workaround for this. We'll look into this as we review animations all up.
Problem Description
If you set an initial non-zero
Animated.Value()
for an Animated component's animation value property, such as{ translateY: initialValue }
, futureAnimated.timing
calls on that property withtoValue: newValue
will cause the animation to apply the initialValue translation again, additive on top of theinitialValue
(causing the animation to improperly jump to a new position, i.e. initialValue * 2). This is better explained through code/screenshots; see repro steps below for more details. The example is for translations but I believe the issue also repro's for opacity and possibly other animatable properties as well.I'm not sure exactly what version this bug was introduced, but we were on 0.68.9 where it was working fine, and upgraded to 0.72.24 where the discrepancy in behavior was observed, so it was somewhere between these two versions. (The repro steps used the latest version 0.74 but it appears to repro on any version from 0.72 to 0.74 as well.)
This is not a blocker for us since we have a workaround. In AnimatedPlatformConfig.cpp we patched our custom RNW nuget to make it always return false for ShouldUseComposition(). It appears that if this function returns true, the discrepancy in behavior is observed, but if it is false, it works fine like before. Without this patch, we would have had to re-write large amounts of our codebase to circumvent the discrepancy in existing behavior which our app was built around (or change everywhere to use
useNativeDriver: false
which would make the animations much more choppy and unresponsive.)Steps To Reproduce
https://github.com/microsoft/react-native-windows/assets/170368444/12f544e9-da24-4be4-86bd-c2f3bdba01ea
Expected Results
If you were to change line 49 to set
useNativeDriver
to false, you would observe the behavior in video below without native driver which is the expected, pre-existing behavior:https://github.com/microsoft/react-native-windows/assets/170368444/45b387ac-cf8b-4918-9a1b-a50061738860
CLI version
13.6.4
Environment
Target Platform Version
10.0.19041
Target Device(s)
Desktop, Xbox
Visual Studio Version
Visual Studio 2022
Build Configuration
Debug
Snack, code example, screenshot, or link to a repository
No response